Как повторно инициализировать ckeditor после уничтожения без перезагрузки страницы

Как я могу повторно инициализировать ckeditor (4) после уничтожения экземпляров, поэтому мне не нужно перезагружать страницу. Im разрушая их, чтобы очистить инлайн дивы перед сохранением (см моих комментариев о том, почему) содержание в MySQL с помощью AJAXКак повторно инициализировать ckeditor после уничтожения без перезагрузки страницы

Вот мой код:

<!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>

источник

2013-05-14 user875293

Вы должны хранить в своих значениях базы данных редакторов, не весь #container элемент. И вуаля! - не нужно уничтожать редакторов, более простой код, лучше UX.

источник

2013-05-14 19:41:21 Reinmar

Вы можете клонировать данные, а затем сохранять их. Это избавит вас от боли при вмешательстве в CKeditor. Сделайте что-то вроде этого

var data_to_save = $("<div>", {id: 'headerLeft', contenteditable: 'true'}).append("<original div>").children().clone();

источник

2013-06-17 14:00:30

Вы можете проверить живой пример в моем следующем скрипку

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-21 10:12:54

Как повторно инициализировать ckeditor после уничтожения без перезагрузки страницы

ответ

Смежные вопросы