Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing HTML element in CKEditor

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?

like image 899
Matthew Groves Avatar asked Dec 20 '22 15:12

Matthew Groves


1 Answers

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();
like image 126
Reinmar Avatar answered Dec 24 '22 01:12

Reinmar