2

如何在销毁实例后重新初始化 ckeditor (4)，这样我就不必重新加载页面。我在通过ajax将内容保存到mysql之前销毁它们以清理内联div（请参阅我对原因的评论）

这是我的代码：

<!DOCTYPE html>
<html>

<head>
  <title>Massive inline editing &mdash; CKEditor Sample</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="/ckeditor/ckeditor.js"></script>
  <script>
    // The "instanceCreated" event is fired for every editor instance created.
    CKEDITOR.on('instanceCreated', function(event) {
      var editor = event.editor,
        element = editor.element;
    });
  </script>

</head>

<body>
  <!-- START CONTAINER DIV -->
  <div id="container">

    <div id="headerLeft" contenteditable="true">
      <!-- START HEADERLEFT DIV -->
      <h2 id="sampleTitle">
        CKEditor<br> Goes Inline!
      </h2>
      <h3>
        Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor.
      </h3>
    </div>
    <!-- END headerLeft DIV -->

    <div id="headerRight" contenteditable="true">
      <!-- START HEADERRIGHT DIV -->

      <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
      </p>
      <p>Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada
        fames ac.
      </p>


    </div>
    <!-- END headerRight DIV -->
  </div>
  <!-- END CONTAINER DIV -->
  <div style="clear:both;"></div>

  <input type="button" id="clickME" value="Save Changes">

  <script>
    $("#clickME").click(function() {

      //START FOR STATEMENT 
      // Cleaning up the div's that contain contenteditable="true" because ckeditor is changing them form
      // <div id="headerRight" contenteditable="true">  TO
      // <div id="headerLeft" contenteditable="true" class="cke_editable cke_editable_inline cke_contents_ltr" tabindex="0" spellcheck="false" style="position: relative; " role="textbox" aria-label="Rich Text Editor, headerLeft" title="Rich Text Editor, headerLeft" aria-describedby="cke_53">
      // Without this for statement

      // IS THERE AN ALTERNATIVE TO PREVENT DESTROYING CKEDITOR INSTANCES????

      for (name in CKEDITOR.instances) {
        CKEDITOR.instances[name].destroy()
      }
      // END FOR STATEMENT

      // GET CONTENTS FROM CONTAINER DIV
      var htmlStr = $('#container').html();

      // CALL FUNCTION TO SAVE CONTENT FROM CONTAINER DIV VIA AJAX
      addHit(htmlStr);


      // HOW TO RE INITIALIZE CKEDITOR HERE SO CKEDITOR WORKS AGAIN?????

    });

    // START FUNCTION TO SAVE DATA VIA AJAX
    function addHit(data1) {
      $.ajax({
        type: "POST",
        url: "/save.php",
        data: "var1=" + data1,
        success: function(msg) {
          alert("Data Saved: " + msg); //Anything you want
        }
      });
    }
    // END FUNCTION TO SAVE DATA VIA AJAX
  </script>

</body>

</html>
4

3 回答 3

1

您应该将编辑器的值存储在数据库中，而不是整个#container元素。瞧！- 无需破坏编辑器，更简单的代码，更好的用户体验。

于 2013-05-14T19:41:21.017 回答
0

您可以克隆数据然后保存。这将为您免除干预 CKeditor 的痛苦。做这样的事情

var data_to_save = $("<div>", {id: 'headerLeft', contenteditable: 'true'}).append("<original div>").children().clone();
于 2013-06-17T14:00:30.893 回答
0

您可以在我的以下小提琴中查看一个现场示例

https://jsfiddle.net/samuelj90/0hx0bnk9/2/

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");
    }
  }
})
于 2018-02-21T10:12:54.997 回答