Removing HTML element in CKEditor

Question

I am creating a CKEditor plugin. As part of this plugin, I would like to be able to remove some arbitrary HTML element from the editor's content. An <img id="remove-me" /> for instance.

I know I can get the contents (var contents = e.getData();) and replace the contents with something else (e.setData(newContents);). I know I could do a string/regex replace, but that gets tricky since the user may add some arbitrary attributes or spacing to the HTML.

I would love to be able to use something like jQuery to find and remove the element (like $("#remove-me").remove(), but don't know of a way to do this.

Any suggestions?

Solution 1

Content of the CKEditor is kept in the element which you can access by editor.editable(). Then, you can use methods like dom.element.find() or dom.element.findOne() and finally you can remove element using dom.element.remove(). You can also access native DOM node and use jQuery.

Example using CKEditor API:

editor.editable().findOne( 'img' ).remove();

Using jQuery:

jQuery( editor.editable().$ ).find( 'img' ).remove();

Solution 2

You can do it like this

CKEDITOR.instances.editor_obj.document.getById(id).remove();

or

editor_obj.document.getById(id).remove();

Comments

[Matthew Groves]

Is this CKEditor 4 only, or is it also available in CKEditor 3?

[Reinmar]

CKEditor 4 only. In CKEditor 3 you can use jQuery( editor.document.$ ).

[ValRob]

After do that, I get Uncaught TypeError: Cannot read property 'attributes' of null when I try to change to html view. Any Idea why?