CKEditor: программно изменить выравнивание пункта

Я использую CKEditor для проекта, и я новичок в нем. По некоторым причинам я не могу использовать панель инструментов. поэтому я должен сделать серию кнопок, чтобы сделать работу по стилю. например, к жирным выделенному тексту я использую:CKEditor: программно изменить выравнивание пункта

CKEDITOR.instances['id-pic-info-edit'].execCommand('bold');

, но я не могу найти команду для выравнивания (обосновывать, слева, справа, в центре).

Я также установил плагин «justify».

вот мой config.js:

config.toolbar = 'Custom'; //makes all editors use this toolbar 
    config.toolbar_Custom = []; //define an empty array or whatever buttons you want. 
    // The toolbar groups arrangement, optimized for a single toolbar row. 
    config.toolbarGroups = [ 
     { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, 
     { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, 
     { name: 'editing',  groups: [ 'find', 'selection', 'spellchecker' ] }, 
     { name: 'forms' }, 
     { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, 
     { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] }, 
     { name: 'links' }, 
     { name: 'insert' }, 
     { name: 'styles' }, 
     { name: 'colors' }, 
     { name: 'alignment', groups : [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }, 
     { name: 'tools' }, 
     { name: 'others' }, 
     { name: 'about' } 
    ]; 

    // The default plugins included in the basic setup define some buttons that 
    // are not needed in a basic editor. They are removed here. 
    config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript'; 

    // Dialog windows are also simplified. 
    config.removeDialogTabs = 'link:advanced'; 
    config.allowedContent = 'u em strong ul li;a[href,target,title];span[class];h1 h2 h3 h4'; 
    config.extraPlugins = 'justify';

источник

2015-08-13 samad montazeri

Так первые вещи сначала:

CKEDITOR.instances.yourInstance.commands, где вы можете просмотреть список доступных команд.
justify(block|center|left|right) - это имена команд, которые вам нужно знать.
CKEDITOR.instances.yourInstance.execCommand('justifyright') - как вы выполняете команду.

Команды выравнивания выполняются в контексте вашего выбора, например. для блока, где находится каретка (выбор). Вы можете изменить выбор из кода с помощью API CKEDITOR.dom.range, чтобы оправдать все, что захотите.

источник

2015-08-13 08:41:47 oleq

большое спасибо. это спасет меня так много времени. –

Это тоже помогло. Спасибо! – Eugene

Я использовал информацию из ответа Олека. Одна важная вещь - команды justify будут работать, только если у вас есть соответствующие кнопки на панели инструментов CKEditor.

Вот jsfiddle для быстрой проверки http://jsfiddle.net/Eugene_Ilyin/mo0us7je/

const editor = CKEDITOR.replace('my-editor'); 
 

 
jQuery('#left').click(() => { 
 
    align('left'); 
 
}); 
 

 
jQuery('#right').click(() => { 
 
    align('right'); 
 
}); 
 

 
function align(align) { 
 
    const range = editor.createRange(); 
 
    range.selectNodeContents(editor.editable()); 
 
    // Create selection and set range. 
 
    const sel = editor.getSelection(); 
 
    sel.selectRanges([range]); 
 
    editor.execCommand('justify' + align); 
 
    // Remove selection. 
 
    sel.removeAllRanges(); 
 
}

<script src="https://cdn.ckeditor.com/4.7.3/full/ckeditor.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 

 
<body> 
 
    <textarea id="my-editor"> 
 
    Lorem ipsum dolor sit amet 
 
    <br /> Lorem ipsum dolor sit amet 
 
    <br /> Lorem ipsum dolor sit amet 
 
    <br /> Lorem ipsum dolor sit amet 
 
    <br /> Lorem ipsum dolor sit amet 
 
    </textarea> 
 
    <button id="left">Align left</button> 
 
    <button id="right">Align right</button> 
 
</body>

источник

2017-10-25 08:41:07 Eugene

CKEditor: программно изменить выравнивание пункта

ответ

Смежные вопросы