Inline CKEditor toolbar has no alignment buttons for h2 elements

问题

(also on their demo page http://ckeditor.com/demo#inline)

Why is this the case? Even if I take their inline sample (http://nightly.ckeditor.com/13-02-08-08-51/standard/samples/inlineall.html) and remove the js code for separate toolbars for heading blocks, I still don't get the alignment option.

I'd like to give users the option to align headings. What am I missing?

I'm also not getting other "block" options like BulletedList, but that's less of an issue.

UPDATE: To repeat the issue you need to have contenteditable="true" applied to a heading element. So, one fix is to wrap the heading in a div with the contenteditable="true". But this doesn't help my case.

回答1:

You need the Justify plugin since CKEditor 4.

Download Justify plugin here
Paste it into ckeditor/plugins/
Add the plugin to your ckeditor.

Here is the javascript code :

$(function() {
    CKEDITOR.config.extraPlugins = 'justify';
});

You don't have anything more to do, Justify plugin will be automatically added to the paragraph toolbarGroup

EDIT

By alignment, I thought you were talking about right|center|left align.

Here, for h tags, we've got those groups :

if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
    editor.on( 'configLoaded', function() {
       editor.config.removePlugins = 'colorbutton,find,flash,font,' +
          'forms,iframe,image,newpage,removeformat,scayt,' +
          'smiley,specialchar,stylescombo,templates,wsc';
       editor.config.toolbarGroups = [
          { name: 'editing', groups: [ 'basicstyles', 'links' ] },
          { name: 'undo' },
          { name: 'clipboard', groups: [ 'selection', 'clipboard' ] },
          { name: 'about' }
       ];
    });
}

['basicstyles', 'links', 'undo', 'selection', 'clipboard', 'about'], there's no align group, simply add it.

You don't event have to modify anything after a new CKEditor install, this group is already in the inline basic configuration

回答2:

It's impossible to enable align buttons on h2 editable. CKEditor cannot modify editable container, because that change simply wouldn't be visible in data got from editor, because editor.getData() returns innerHTML not outerHTML.

I'm also afraid that simple bypass doesn't exist. You can wrap h2 with editable div, set enterMode=BR, remove buttons like format combo from toolbar, but that would be still incomplete solution, because user will be able to remove that h2, split it by pasting some block elements or leave it somehow and write outside it. This issues may be fixed, but I guess that you don't want to spend on this another month :).

回答3:

So, one year later I came back and handled it differently. I took the justify plugin, and made a copy of it that only works the elements with which the original plugin doesn't. I had to modify it to suit my needs, but commenting the following out was a start(plugin.js):

if ( editor.blockless )
  return;

I don't know how interesting this is, but if anyone needs it, leave a comment and I'll post the entire source. It basically adds the text-align css to the editor element, instead of the inner block elements.

回答4:

ensure you are using Full CKEditor version

来源：https://stackoverflow.com/questions/14782152/inline-ckeditor-toolbar-has-no-alignment-buttons-for-h2-elements

标签

javascript

ckeditor