1

I want to remove all divs, classes, attributes and pretty much anything CKEDITOR added to the DOM. For example calling jquery tabs("destroy"); will remove all added divs added by jQuery tabs. How can I do the same for CKEDITOR, cant seem to find the solution.

$("body").find("[edit]").each(function() {
    $(this).ckeditor();
});

Thats how I'm calling ckeditor. I found this in the documentation, but am not sure how to use it. http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#destroy

  • possible duplicate of [Remove CKEdit Instance](http://stackoverflow.com/questions/2985396/remove-ckedit-instance) – huysentruitw Feb 13 '15 at 17:23
  • I found this http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#destroy But am not sure how to apply it. Above is how i'm initiating the CKEDITOR plugin –  Feb 13 '15 at 18:28

3 Answers3

0

If you can construct a selector for what you want to remove, you can use jQuery's remove function. For example, if all the CKEditor elements contain "ckeditor" in their class, you could use

$("[class*='ckeditor']").remove()

to remove them all from the DOM.

https://api.jquery.com/remove/

linesarefuzzy
  • 1,890
  • 17
  • 17
  • That wont work because ckeditor adds classes and attributes to elements that were not added by the plugin. –  Feb 13 '15 at 17:29
0

According to http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.remove you should use the destroy() function not remove()

Removes an editor instance from the global CKEDITOR object. 
This function is available for internal use only. External code
must use CKEDITOR.editor.prototype.destroy to avoid memory leaks.

So the code would be $([class*='ckeditor']).destroy(true)

Michael_Cloudbusting
  • 323
  • 1
  • 3
  • 9
0

You need to keep things separated. You can't use jQuery to remove CKEditor instances, and you can't use CKEditor to remove jQuery dialogs or any other jQuery widget.

jQuery's .remove() is to remove elements from the DOM, that is correct, but that does not properly destroy any added events etc.

So you use CKEditor's .destroy() to remove any instances from your DOM and then you can remove any jQuery containers (tabs, dialogs or whatever) after with jQuery's destruction method. For a jQuery-UI dialog that would be: $("#myDiv").dialog("destroy").

// So to create you use var editor = CKEditor.replace('id-of-your-input'); // and to destroy you use: editor.destroy();

It's that simple.

I created a plunk here where i create and destroy a CKEditor in steps in a jQuery Dialog: http://plnkr.co/edit/z1YJa4?p=preview

The official docs are here: http://sdk.ckeditor.com/samples/saveajax.html

Hope that helps.

Brunis
  • 1,073
  • 8
  • 12