Question

我使用下面的代码来销毁编辑器实例。

editor.destroy();

在此之后，我尝试使用以下代码初始化CKEditor并设置内容。

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

但是当我这样做时，只显示空的HTML页面。

我怎样才能以正确的方式做到这一点？

Answer 1

如果我理解正确的话，跟随小提琴将帮助你初始化和销毁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>

这是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

Answer 2

您所描述的操作需要时间来完成，因此请使用事件来控制何时创建和销毁编辑器：

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");
    } );

如何再次摧毁和重新安置CKEDITOR？

2 个答案: