CKeditor - different presets in the same page

Question

I'm using CKeditor in my web page. And I want to set different presets in the same page. For example, I want to use the Standard CKeditor in one textarea and the Basic in another one...

Does anybody know how can I do it??

Thank you very much!

Answer 1

You need to download CKEditor version which contains all plugins which you want to use in the most advanced configuration and then "trim" it down when initialising editor which you want to be more limited.

For instance, if you want one editor with standard preset and one with basic, you should download editor with standard preset, because it will have all plugins needed by basic preset. Then initialise one editor without any additional config:

CKEDITOR.replace( 'editor-std' );

And second one with options which are used by basic editor:

CKEDITOR.replace( 'editor-basic', {
    // Plugins used by basic preset.
    plugins: 'about,basicstyles,clipboard,floatingspace,list,indentlist,enterkey,entities,link,toolbar,undo,wysiwygarea',

    // The toolbar groups arrangement, optimized for a single toolbar row.
    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: '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'
} );

You can also save this config in a file similar to config.js which you'll find in CKEditor main directory and use it this way:

CKEDITOR.replace( 'editor-basic', { customConfig: 'config-basic.js' } );

Where to get presets' configs?

There are no configs ready to use, but you can find all necessary settings in the CKEditor presets repository. As you'll find I used basic-ckeditor-config.js file and extended it with plugins from basic-build-config.js.