Using two different editors

The ability to use two or more types of rich text editors on one page is a common requirement. For instance, you may want to use the classic editor next to a couple of inline editors.

Do not load two builds on one page. This is a mistake that leads to:

• Code duplication. Both builds share up to 99% of the code, including CSS and SVGs. By loading them twice you make your page unnecessarily heavy.
• Duplicated CSS may lead to conflicts and, thus, a broken UI of the editors.
• The translation repository gets duplicated entries which may cause the loading of incorrect strings with translations.

# Solutions

If you want to load two different editors on one page you need to make sure that they are built together (once). This can be achieved in at least two ways:

• Integrating CKEditor 5 from source directly into your application. Since you build you application once, the editors that you use will be built together, too.
• Creating a “super build” of CKEditor 5. Instead of creating a build that exports just one editor, you can create a build that exports two or more at the same time.

# Creating “super builds”

There is no limit to how many editor classes a single build can export. By default, the official builds export a single editor class only. However, they can easily import more.

You can start by forking (or copying) an existing build like in the “Creating custom builds” guide. Let’s say you forked and cloned the ckeditor5 repository and want to add InlineEditor to the classic build:

git clone -b stable git@github.com:<your-username>/ckeditor5.git
cd ckeditor5/packages/ckeditor5-build-classic
npm install

Now it is time to add the missing editor package and install it:

npm install --save-dev @ckeditor/ckeditor5-editor-inline

Once all the dependencies are installed, modify the webpack’s entry point which is the src/ckeditor.js file. For now it was exporting just a single class:

// The editor creator to use.
import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';

// ...

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    // ...
];

// Editor configuration.
ClassicEditor.defaultConfig = {
    // ...
};

Let’s make it export an object with two classes: ClassicEditor and InlineEditor. To make both constructors work in the same way (load the same plugins and default configuration) you also need to assign builtinPlugins and defaultConfig static properties to both of them:

// The editor creators to use.
import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
import { InlineEditor as InlineEditorBase } from '@ckeditor/ckeditor5-editor-inline';

// ...

class ClassicEditor extends ClassicEditorBase {}
class InlineEditor extends InlineEditorBase {}

// Plugins to include in the build.
const plugins = [
    // ...
];

ClassicEditor.builtinPlugins = plugins;
InlineEditor.builtinPlugins = plugins;

// Editor configuration.
const config = {
    // ...
};

ClassicEditor.defaultConfig = config;
InlineEditor.defaultConfig = config;

export default {
    ClassicEditor, InlineEditor
};

Since you now export an object with two properties (ClassicEditor and InlineEditor), it is also reasonable to rename the global variable to which webpack will assign this object. So far it was called ClassicEditor. A more adequate name now would be for example CKEDITOR. This variable is defined in webpack.config.js in the output.library setting:

diff --git a/webpack.config.js b/webpack.config.js
index c57e371..04fc9fe 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,7 +21,7 @@ module.exports = {

     output: {
         // The name under which the editor will be exported.
-        library: 'ClassicEditor',
+        library: 'CKEDITOR',

         path: path.resolve( __dirname, 'build' ),
         filename: 'ckeditor.js',

Once you changed the src/ckeditor.js and webpack.config.js files it is time to rebuild the build:

npm run build

Finally, when webpack finishes compiling your super build, you can change the samples/index.html file to test both editors:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – super build</title>
    <style>
        body {
            max-width: 800px;
            margin: 20px auto;
        }
    </style>
</head>
<body>

<h1>CKEditor&nbsp;5 – super build</h1>

<div id="classic-editor">
    <h2>Sample</h2>

    <p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#classic-editor">classic editor build</a>.</p>
</div>

<div id="inline-editor">
    <h2>Sample</h2>

    <p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#inline-editor">inline editor build</a>.</p>
</div>

<script src="../build/ckeditor.js"></script>
<script>
    CKEDITOR.ClassicEditor
        .create( document.querySelector( '#classic-editor' ) )
        .catch( err => {
            console.error( err.stack );
        } );

    CKEDITOR.InlineEditor
        .create( document.querySelector( '#inline-editor' ) )
        .catch( err => {
            console.error( err.stack );
        } );
</script>

</body>
</html>