在CKEditor中删除HTML元素 [英] Removing HTML element in CKEditor

问题描述

我正在创建CKEditor插件.作为此插件的一部分，我希望能够从编辑器的内容中删除一些任意HTML元素.例如<img id="remove-me" />.

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.

我知道我可以获取内容(var contents = e.getData();)并将内容替换为其他内容(e.setData(newContents);).我知道我可以进行字符串/正则表达式替换，但是这很棘手，因为用户可以向HTML添加一些任意属性或间距.

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.

我希望能够使用jQuery之类的东西来查找和删除元素(例如$("#remove-me").remove()，但不知道这样做的方法.

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.

有什么建议吗?

推荐答案

CKEditor的内容保存在元素中，您可以通过 dom.element.find() 或 dom.element.findOne() ，最后您可以使用本地DOM节点并使用jQuery.

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.

使用CKEditor API的示例:

Example using CKEditor API:

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

使用jQuery:

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

这篇关于在CKEditor中删除HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！