Prevent nested ckeditor interfere with each other

Question

Given I have a ckeditor where a user could type rich text and insert many custom built widgets. One of the widgets represents HTML form where the textareas allows the user to write richtext too. Those textareas components integrate inline ckeditor as well. That ckeditor is configured with just a few plugins (font, bold, italic, lists, color) and is actually being nested in the outer one. The outer editor is configured with much more editor plugins. Now to the problem. When the user focuses the inner editor it's toolbar show up and can be used for text formatting, but in the same time, the outer editor's toolbar is visible as well, so the user could potentially try to apply formatting or insert widgets which are not applicable in the nested editor thus resulting in errors. So I wonder if there is a way to prevent nested editors to interfere with its ancestor ckeditor. Any thoughts on a different approach are appreciated as well.

I'm not sure of what the contexts of your editor's var are, but maybe: editor.on( 'elementsPathUpdate', function( evt ) {// Code to hide toolbars here}) will be useful to you... — José L.
I didn't quite get what you suggested. Anyway, I managed to deal with the problem by the following way: - When child editor is focused, check the DOM upward if there is a parent ckeditor element. - I there is one, then get its reference and make it readonly — factor5

factor5 factor5 · Accepted Answer · 2018-11-15T20:15:07

I managed to do what I needed by making the parent editor readonly thus preventing using its toolbar when an inner editor is focused.

  let parentEditorId = $(currentChildEditor).closest(parentEditor).attr('id');
  if (parentEditorId) {
    this.editor.on('focus', () => {
      CKEDITOR.instances[parentEditorId].setReadOnly(true);
    });

    this.editor.on('blur', () => {
      CKEDITOR.instances[parentEditorId].setReadOnly(false);
    });
  }

Prevent nested ckeditor interfere with each other

1 Answers