CKEditor 自动从 div 中剥离类 [英] CKEditor automatically strips classes from div

问题描述

我在我的网站上使用 CKEditor 作为后端编辑器.它驱使我绕过弯道，因为它似乎想要在我按下源按钮时将代码更改为它认为合适的方式.例如，如果我点击源代码并创建一个

...

一些内容

然后它无缘无故地从 <div> 中剥离了类，所以当我再次点击源代码时，它已更改为...

一些内容

我认为可以在 config.js 中关闭这种令人讨厌的行为，但我一直在挖掘并且在文档中找不到任何可以关闭它的内容.

解决方案

禁用内容过滤

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

config.allowedContent = true;

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

配置内容过滤

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

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

config.extraAllowedContent = 'div(*)';

或者一些 Bootstrap 的东西:

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

或者，您可以为 dt 和 dd 元素允许带有可选 dir 属性的描述列表:

config.extraAllowedContent = 'dl;dt dd[目录]';

这些只是非常基本的例子.您可以编写各种规则——需要属性、类或样式、仅匹配特殊元素、匹配所有元素.您还可以禁止某些内容并完全重新定义 CKEditor 的规则.阅读更多关于:

• CKEditor 中的内容过滤 –为什么需要内容过滤器.
• 高级内容过滤器 –对过滤机制的深入描述.
• 允许的内容规则 –如何编写允许的内容规则.

I am using CKEditor as a back end editor on my website. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a <div>...

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

It then for no apparent reason strips the class from the <div>, so when I hit source again it has been changed to...

<div>some content</div>

I presume this irritating behaviour can be turned off in the config.js, but I have been digging and cant find anything in documentation to turn it off.

解决方案

Disabling content filtering

The easiest solution is going to the config.js and setting:

config.allowedContent = true;

(Remember to clear browser's cache). Then CKEditor stops filtering the inputted content at all. However, this will totally disable content filtering which is one of the most important CKEditor features.

Configuring content filtering

You can also configure CKEditor's content filter more precisely to allow only these element, classes, styles and attributes which you need. This solution is much better, because CKEditor will still remove a lot of crappy HTML which browsers produce when copying and pasting content, but it will not strip the content you want.

For example, you can extend the default CKEditor's configuration to accept all div classes:

config.extraAllowedContent = 'div(*)';

Or some Bootstrap stuff:

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

Or you can allow description lists with optional dir attributes for dt and dd elements:

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

These were just very basic examples. You can write all kind of rules - requiring attributes, classes or styles, matching only special elements, matching all elements. You can also disallow stuff and totally redefine CKEditor's rules. Read more about:

• Content filtering in CKEditor – why do you need content filter.
• Advanced Content Filter – in deep description of the filtering mechanism.
• Allowed content rules – how to write allowed content rules.

这篇关于CKEditor 自动从 div 中剥离类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！