Configuration of inline ckeditor toolbar based on html tag

Question

Is there any doc on how inline ckeditor shows only relevant toolitems based on the html tag it is attached to.

For example, the inline ckeditor for a <p> tag hides the Format toolbar and list (bulleted and numbered) tool items but shows indent/outdent tool items. The ckeditor itself is configured with the following tool items. They are shown for a <div>but are not all for a <p>. So there must be some kind of filtering based on the html tags?

config.toolbar = [
        { name: 'styles', items: [ 'Format' ] },
        { name: 'editing', items: [ 'Scayt' ] },
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'RemoveFormat' ] },
        { name: 'list', items: [ 'NumberedList', 'BulletedList', 'Outdent', 'Indent'] },
        { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight']}
    ];

Clarification: I want only one editor, am currently having only one config as shown above, but i see different toolboor items for p and div. So trying to find if its expected and more if documented. — smDb

Mateusz Samsel Mateusz Samsel · Accepted Answer · 2017-12-13T08:42:41

If you want to use multiple inline editors, then every editor will gain different toolbar config. Example how to achieve that is here. If you wish to have one editor instance and modify toolbar within it, then modifying it might be problematic. But there is developed new feature (balloontoolbar) which will be available in next few days. It will allow on having floating balloon over text inside editor with preconfigured set of buttons. So you could adapt it to have different set of buttons depend of selecting element inside editor. More info about this feature: https://github.com/ckeditor/ckeditor-dev/issues/933

Configuration of inline ckeditor toolbar based on html tag

1 Answers