How to Destroy and Reinitialize CKEDITOR Again?

问题

I use the below code to destroy the editor instance.

editor.destroy();

After this, I try to initialize CKEditor and set content using the below code.

CKEDITOR.replace('editor1');
CKEDITOR.instances['editor1'].setData("MY HTML DATA");

But when I am doing like this only the empty HTML page is Shown.

How can I do this in a Correct Way?

回答1:

If i understand you correctly, following fiddle will help you in initializing and destroying ckeditor.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>CKEditor</title>
    <script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
  </head>

  <body>
    <div name="editor1">TEST CONTENT</div>
    <button id="toogleEditor">
    TOOGLE EDITOR
    </button>
  </body>

</html>

Here is the JS

var editorInstance;
     document.getElementById('toogleEditor').addEventListener('click',function() {
      if (CKEDITOR) {
        if (editorInstance) {
            editorInstance.destroy();
          editorInstance = undefined;
        } else {
          editorInstance = CKEDITOR.replace('editor1');
          editorInstance.setData("MY HTML DATA");
        }
      }
    })

Fiddle

回答2:

Operations you have described require time to complete thus please use events to control when editor gets created and destroyed:

https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#event-instanceReady

https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR.html#event-instanceDestroyed

    var editor = CKEDITOR.replace( 'editor1', {
        language: 'en'
    });

    // Recreate editor after it has been destroyed
    CKEDITOR.on( 'instanceDestroyed', function() {
        CKEDITOR.replace('editor1');
    } );

    // Set editor data after it has been created
    CKEDITOR.on( 'instanceReady', function( evt ) {
        evt.editor.setData("MY HTML DATA");
    } );

来源：https://stackoverflow.com/questions/48902441/how-to-destroy-and-reinitialize-ckeditor-again

标签

javascript

jquery

ckeditor