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?

回答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();

回答2:

You can do it like this

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

or

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

来源：https://stackoverflow.com/questions/23573839/removing-html-element-in-ckeditor