CKEditor: change paragraph alignment programmatically

Question

I am using CKEditor for a project and i am new with it. For some reasons i can't use it's toolbar. so i have to make a series of buttons to do styling job. for example to bold selected text i use:

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

but i can't find a command for alignments(justify, left, right, center).

i also installed 'justify' plugin.

here is my 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';

Answer 1

So first things first:

CKEDITOR.instances.yourInstance.commands is where you can browse available commands.
justify(block|center|left|right) are the command names you need to know.
CKEDITOR.instances.yourInstance.execCommand( 'justifyright' ) is how you execute the command.

Justify commands are executed in the context of your selection, eg for the block where the caret (selection) is located. You can change the selection from code using CKEDITOR.dom.range API to justify anywhere you want.

Answer 2

I've used information from Oleq's answer. One important thing - justify commands will work only if you have corresponding buttons on the CKEditor's toolbar.

Here is jsfiddle for quick checking 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>

CKEditor: change paragraph alignment programmatically

Question

2 answers

solution1
3 ACCPTED 2015-08-13 08:41:47

solution2
1 2017-10-25 08:41:07

CKEditor: change paragraph alignment programmatically

Question

2 answers

solution1 3 ACCPTED 2015-08-13 08:41:47

solution2 1 2017-10-25 08:41:07

solution1
3 ACCPTED 2015-08-13 08:41:47

solution2
1 2017-10-25 08:41:07