CKEditor自动从div中删除类

Question

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

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

然后没有明显的理由剥离类<div>,所以当我再次点击源它已被改为...

<div>some content</div>

我认为这种恼人的行为可以在关闭config.js,但我一直在挖掘,无法在文档中找到任何东西来关闭它.

Answer 1

禁用内容过滤

最简单的解决方案是进入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属性dt和dd元素的描述列表:

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

这些只是非常基本的例子.您可以编写所有类型的规则 - 需要属性,类或样式,仅匹配特殊元素,匹配所有元素.您也可以禁用内容并完全重新定义CKEditor的规则.了解更多:

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

Answer 2

我找到了解决方案.

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

config.allowedContent = true;

使用内容字符串适用于id等,但不适用于类和样式属性,因为您有()和{}用于类和样式过滤.

所以我的赌注是允许编辑器中的任何类是:

config.extraAllowedContent = '*(*)';

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

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

对于任何标记,只允许class ="asdf1"和class ="asdf2":

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

(所以你必须指定类名)

仅允许p = tag的class ="asdf":

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];*(*);*{*}';

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

Answer 3

编辑:这个答案适用于那些在drupal中使用ckeditor模块的人.

我找到了一个不需要修改ckeditor js文件的解决方案.

这个答案是从这里复制的.所有学分应归原作者所有.

转到"管理>>配置>> CKEditor"; 在"个人档案"下,选择您的个人资料(例如完整).

编辑该配置文件,并在"高级选项>>自定义JavaScript配置"上添加config.allowedContent = true;.

不要忘记在"性能"选项卡下刷新缓存.

Answer 4

从CKEditor v4.1开始,您可以在CKEditor的config.js中执行此操作:

CKEDITOR.editorConfig = function( config ) {
  config.extraAllowedContent = '*[id](*)';  // remove '[id]', if you don't want IDs for HTML tags
}

有关允许的内容规则的详细语法,请参阅官方文档

Answer 5

如果您使用ckeditor 4.x,您可以尝试

config.allowedContent = true;

如果你使用的是ckeditor 3.x,你可能会遇到这个问题.

尝试在config.js中添加以下行

config.ignoreEmptyParagraph = false;

Answer 6

这在ckeditor中称为ACF(自动内容过滤器).它删除了所有unnessary标签我们在文本内容中使用的内容.在config.js文件中使用此命令应该关闭此ACK.

config.allowedContent = true;

Answer 7

请参阅官方高级内容过滤器指南和插件集成教程.

关于这个强大的功能,你会发现更多.另请参阅config.extraAllowedContent,它似乎适合您的需求.

Answer 8

以下是CKEDITOR 4.x的完整示例：

HTML

<textarea name="post_content" id="post_content" class="form-control"></textarea>

脚本

CKEDITOR.replace('post_content', {
   allowedContent:true,
});

上面的代码将允许编辑器中的所有标签。

更多细节：CK EDITOR 允许的内容规则