Report an issue
Interface

EditorConfig (core/editor)

@ckeditor/ckeditor5-core/src/editor/editorconfig

interface

CKEditor configuration options.

An object defining the editor configuration can be passed when initializing the editor:

EditorClass
    .create( {
        toolbar: [ 'bold', 'italic' ],
        image: {
            styles: [
                ...
            ]
        }
    } )
    .then( ... )
    .catch( ... );

Check the Configuration guide for more information about setting configuration options.

Filtering

Properties

  • alignment : AlignmentConfig

    The configuration of the alignment feature.

    Read more in AlignmentConfig.

  • autosave : AutosaveConfig

    The configuration of the autosave feature.

    Read more in AutosaveConfig.

  • balloonToolbar : Array.<String> | Object

    Contextual toolbar configuration. Used by the BalloonToolbar feature.

    const config = {
        balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
    };

    You can also use '|' to create a separator between groups of items:

    const config = {
        balloonToolbar: [ 'bold', 'italic', | 'undo', 'redo' ]
    };

    Read also about configuring the main editor toolbar in toolbar.

  • blockToolbar : Array.<String> | Object

    The block toolbar configuration. Used by the BlockToolbar feature.

    const config = {
        blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
    };

    You can also use '|' to create a separator between groups of items:

    const config = {
        blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
    };

    Read more about configuring the main editor toolbar in toolbar.

  • ckfinder : CKFinderAdapterConfig

    The configuration of the CKFinder upload adapter.

    Read more in CKFinderAdapterConfig.

  • cloudServices : CloudServicesConfig

    The configuration of CKEditor Cloud Services. Introduced by the CloudServices plugin.

    Read more in CloudServicesConfig.

  • fontFamily : FontFamilyConfig

    The configuration of the font family feature. It is introduced by the FontFamilyEditing feature.

    Read more in FontFamilyConfig.

  • fontSize : FontSizeConfig

    The configuration of the font size feature. It is introduced by the FontSizeEditing feature.

    Read more in FontSizeConfig.

  • heading : HeadingConfig

    The configuration of the heading feature. Introduced by the HeadingEditing feature.

    Read more in HeadingConfig.

  • highlight : HighlightConfig

    The configuration of the Highlight feature.

    Read more in HighlightConfig.

  • image : ImageConfig

    The configuration of the image features. Used by the image features in the @ckeditor/ckeditor5-image package.

    Read more in ImageConfig.

  • language : String

    The editor UI's language.

    The language code is defined in the ISO 639-1 standard. CKEditor 5 currently supports around 20 languages and the number is growing.

    Note: You do not have to specify this option if your build is optimized for one language or if it is the default language (English is the default language for CDN builds).

    Simple usage:

    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            language: 'de'
        } )
        .then( editor => {
            console.log( editor );
        } )
        .catch( error => {
            console.error( error );
        } );

    After this step you need to attach the corresponding translation file. Translation files are available on CDN for predefined builds: <script src="https://cdn.ckeditor.com/ckeditor5/[version.number]/[distribution]/lang/[lang].js"></script>

    But you can add them manually by coping from the node_modules/@ckeditor/ckeditor5-build-[name]/build/lang/[lang].js'.

    Check the UI language guide for more information about the localization options and translation process.

  • mediaEmbed : MediaEmbedConfig

    The configuration of the MediaEmbed feature.

    Read more in MediaEmbedConfig.

  • plugins : Array.<(String | Function)>

    The list of plugins to load.

    If you use an editor build you can define the list of plugins to load using the names of plugins that are available:

    const config = {
        plugins: [ 'Bold', 'Italic', 'Typing', 'Enter', ... ]
    };

    You can check the list of plugins available in a build using this snippet:

    ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName );

    If you use an editor creator directly (imported from a package like @ckeditor/ckeditor5-editor-classic) or you want to load additional plugins which were not included in a build you use, then you need to specify the plugins using their constructors:

    // A preset of plugins is a plugin as well.
    import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
    // The bold plugin.
    import Bold from '@ckeditor/ckeditor5-editor-basic-styles/src/bold';
    
    const config = {
        plugins: [ Essentials, Bold ]
    };
  • removePlugins : Array.<String>

    The list of plugins which should not be loaded despite being available in an editor build.

    const config = {
        removePlugins: [ 'Bold', 'Italic' ]
    };

    Note: Be careful when removing plugins using config.removePlugins from CKEditor builds. If removed plugins were providing toolbar buttons, the default toolbar configuration included in a build will become invalid. In such case you need to provide the updated toolbar configuration.

  • toolbar : Array.<String> | Object

    The editor toolbar configuration.

    Simple format (specifies only toolbar items):

    const config = {
        toolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
    };

    Extended format:

    const config = {
        toolbar: {
            items: [ 'bold', 'italic', '|', 'undo', 'redo' ],
    
            viewportTopOffset: 30
        }
    };

    Options which can be set using the extended format:

    • toolbar.items – An array of toolbar item names. The components (buttons, dropdowns, etc.) which can be used as toolbar items are defined in editor.ui.componentFactory and can be listed using the following snippet:

        Array.from( editor.ui.componentFactory.names() );

      You can also use '|' to create a separator between groups of items:

        toolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
    • toolbar.viewportTopOffset – The offset (in pixels) from the top of the viewport used when positioning a sticky toolbar. Useful when a page with which the editor is being integrated has some other sticky or fixed elements (e.g. the top menu). Thanks to setting the toolbar offset the toolbar will not be positioned underneath or above the page's UI.

  • typing : TypingConfig

    The configuration of the typing features. Used by the features from the @ckeditor/ckeditor5-typing package.

    Read more in TypingConfig.