CKEditor中如何自动去除div中的类?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (43)

我在我的网站上使用CKEditor作为后端编辑器。它正在推动我转弯,因为它似乎想要将代码更改为它看起来合适,只要按下源按钮。例如,如果我击中源并创建一个<div>...

<div class="myclass">some content</div>

然后它没有明显的理由了这个类<div>,所以当我再次击中源时,它已被更改为...

<div>some content</div>
提问于
用户回答回答于

这关闭过滤,它的工作,但不是一个好主意......

config.allowedContent = true;

使用内容字符串可以很好地适用于id等,但不适用于类和样式属性,因为你有用于类和样式过滤的()和{}。

所以我敢打赌,让编辑中的任何课程都是:

config.extraAllowedContent = '*(*)';

这允许任何类和任何内联样式。

config.extraAllowedContent = '*(*);*{*}';

对于任何标签,只允许class =“asdf1”和class =“asdf2”:

config.extraAllowedContent = '*(asdf1,asdf2)';

(所以你必须指定类名)

仅允许class =“asdf”用于p标记:

config.extraAllowedContent = 'p(asdf)';

要允许任何标记的id属性:

config.extraAllowedContent = '*[id]';

等等

要允许样式标记(<style type =“text / css”> ... </ style>):

config.extraAllowedContent = 'style';

要更复杂一点:

config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

希望这是一个更好的解决方案...

用户回答回答于

禁用内容过滤

最简单的解决方案是进入config.js并设置:

config.allowedContent = true;

请记住清除浏览器的缓存)。然后CKEditor完全停止过滤输入的内容。但是,这将完全禁用内容过滤,这是CKEditor最重要的功能之一。

配置内容过滤

你还可以更精确地配置CKEditor的内容过滤器,以仅允许您需要的这些元素,类,样式和属性。这个解决方案要好得多,因为CKEditor仍然会删除浏览器在复制和粘贴内容时产生的大量糟糕的HTML,但它不会去除你想要的内容。

例如,你可以扩展CKEditor的默认配置来接受所有的div类:

config.extraAllowedContent = 'div(*)';

或者一些Bootstrap的东西:

config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';

或者,你可以允许使用可选dir属性dtdd元素的说明列表:

config.extraAllowedContent = 'dl; dt dd[dir]';

扫码关注云+社区