cytsunny cytsunny - 4 days ago 6
Javascript Question

How to turn off plugin for CKEditor 4.6?

For CKEditor 4.4, in config.js, there will be a section for choosing what plugin to be used and how they should be group.

Something like this:

config.toolbar = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor', 'magicformcustom' ] },
{ name: 'insert', items: [ 'Table', 'HorizontalRule', 'SpecialChar'] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
];

// Toolbar groups configuration.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'styles' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'colors' }
];


However, when I search for these in config.js in CKEditor 4.6, they were gone. As I need to have different plugin in different part of my site, I don't want to use the online custom builder. Where should I add / remove plugin?

Answer

You can add/remove plugins inside your webpage when you instantiate CKEditor like this:

CKEDITOR.replace('editor1', {
    extraPlugins: 'iframedialog,uploadimage,divarea,youtube',
    removePlugins: 'pastetext,pastefromword'
});

And you can choose inside your webpage what items appear in the toolbar like this:

CKEDITOR.replace('editor1', {
    toolbar: [
        { name: 'document', items: [ 'Source', 'Save' ] },
        { name: 'clipboard', items: [ 'Undo', 'Redo' ] },
        { name: 'editing', items: [ 'SelectAll' ] },
        { name: 'basicstyles', items: [ 'Bold', 'Italic', '-', 'RemoveFormat' ] },
        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] },
        { name: 'insert', items: [ 'Image', 'Table', 'Smiley' ] },
        { name: 'styles', items: [ 'Font', 'FontSize' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
        { name: 'tools', items: [ 'Maximize' ] }
    ]
});

You can see the names of the plugins here: https://github.com/ckeditor/ckeditor-dev/tree/master/plugins

Also, in the Toolbar Configurator, you can check both Basic and Advanced configurator types which list groups and items and copy them to your configuration file.

Comments