Ckeditor5: Multiple editors on the same page

Created on 1 Oct 2018 · 10Comments · Source: ckeditor/ckeditor5

I'm trying to use multiple editors on the same page but I don't see anything in the documentation to address that.

How can I do that?

question

Source

jerauf

Most helpful comment

Or, do you mean multiple editor types (e.g. classic, inline, balloon) used on one page?

This is covered in https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-3-using-two-different-editors (note: these are nightly docs; this guide was not yet published in the official documentation at the moment of writing this comment)

Reinmar on 1 Oct 2018

👍2

All 10 comments

Hi! Do you mean multiple editors of the same type? For example, a couple of classic editors?

Or, do you mean multiple editor types (e.g. classic, inline, balloon) used on one page?

Reinmar on 1 Oct 2018

Or, do you mean multiple editor types (e.g. classic, inline, balloon) used on one page?

Reinmar on 1 Oct 2018

👍2

Sorry. I mean 2 classic editors.

jerauf on 1 Oct 2018

Ah, then it's a matter of using ClassicEditor.create() multiple times. Like this:


<div id="editor1">
    <h2>Editor 1</h2>
</div>

<div id="editor2">
    <h2>Editor 2</h2>
</div>

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

    ClassicEditor.create( document.querySelector( '#editor2' ) )
        .then( editor => {
            window.editor2 = editor;
        } )
        .catch( err => {
            console.error( err.stack );
        } );
</script>

Reinmar on 1 Oct 2018

👍1

Got it. Thank you for the fast response.

jerauf on 1 Oct 2018

@Reinmar Is this also the case with DecoupledEditor? Can I stack two Decoupled Editors into a single page?

robertfoenix on 29 Jan 2019

Yes :) There's no limit. It's just the matter of using the API in the right way. For example, you should be able to execute this code twice in a row:

DecoupledEditor
    .create( '<p>Editor data</p>' )
    .then( editor => {
        // Append the toolbar to the <body> element.
        document.body.appendChild( editor.ui.view.toolbar.element );

        // Append the editable to the <body> element.
        document.body.appendChild( editor.ui.view.editable.element );

        console.log( 'Editor was initialized', editor );
    } )
    .catch( err => {
        console.error( err.stack );
    } );

And that should give you two identical editors.

Reinmar on 30 Jan 2019

👍1

@Reinmar Is it possible to execute the above code for DecoupledEditor multiple times, while making sure they're all sharing the same editor.ui.view.toolbar.element? In short I need multiple editable elements, but only one toolbar.

Note: I'm aware there's a tutorial for MultirootEditor, but it might not fit my use case, as it calls Editor.create() once by passing an object as the first parameter, whereas I need to be able to call Editor.create() multiple times. The reason is because I would be implementing a React Component (similar to https://github.com/ckeditor/ckeditor5-react/blob/master/src/ckeditor.jsx) that would be used multiple times. MultirootEditor is also used when you know how many elements there are in advance, but for my use case, the React component could be dynamically added.

ysct on 27 Jun 2019

@ysct We had the same requirements as you:

One toolbar in the UI
Multiple editing fields on one page
Dynamic addition of fields
Being able to use default builds of CKEditor (less maintenance on our side)

We've solved it by using a context that keeps zero or one toolbar elements. When an editor receives focus, the toolbar will be set in the context and can be rendered anywhere under the <TextEditorProvider>.

In this gist you can find our React components: https://gist.github.com/martijnpieters/92e16ccfc9071f408140f4dba55f133a, which can be used like this:

<TextEditorProvider>
  <h1>External toolbar</h1>
  <TextEditorToolbar />
  <h2>First editor with external toolbar</h2>
  <TextEditorContent
    editor={DecoupledEditor}
    config={config}
    data={text}
    onChange={(event, editor) => {
      const data = editor.getData();

      console.log(data);
    }}
  />
  <h2>Second editor with external toolbar</h2>
  <TextEditorContent
    editor={DecoupledEditor}
    config={config}
    data={text}
    onChange={(event, editor) => {
      const data = editor.getData();

      console.log(data);
    }}
  />
</TextEditorProvider>