CKEditor会自动从div中删除类(class)。

Question

我在我的网站上使用CKEditor作为后端编辑器。然而它让我感到非常苦恼，因为每当我点击源代码按钮时，它似乎都想按照自己的方式更改代码。例如，如果我点击源代码并创建一个<div>...

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

接着，它似乎毫无原因地从<div>中去掉了类(class)，所以当我再次查看源代码时，它已经被更改为...

<div>some content</div>

我认为这种令人烦恼的行为可以在config.js中关闭，但我一直在查找文档中是否有关闭它的内容。

- Iain Simpson

---

经过大量的搜索，我找到了解决办法。如果你进入config.js文件并将CKEDITOR.config.allowedContent = true;设置为真，它可以防止编辑器随意更改内容。 - Iain Simpson

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中的内容过滤 - 为什么需要内容过滤。
• 高级内容过滤器 - 对过滤机制进行深入描述。
• 允许的内容规则 - 如何编写允许的内容规则。

- Iain Simpson

---

这将禁用该功能。最好进行配置而不是禁用。 - oleq

有时候这个解决方案是有效的，有时候它却不行。样式属性会被移除，但只有有时候，其余的则保留。 - machineaddict

我正在使用一个叫做Kentico的东西，它使用这个编辑器。我已经在我的config.js中添加了一行"CKEDITOR.config.allowedContent = true;"，但它仍然重新格式化我的HTML，这破坏了我的Bootstrap代码，有人有任何想法吗？ - Tom Bowen

对于多个元素，注意CKEditor文档中提到的“elements-一个由空格分隔的元素名称列表...”，但它们需要像上面第三个示例或其他答案中的一些示例那样用分号分隔。允许div，p和任何具有指定属性的style属性的示例：config.extraAllowedContent ='div; p; * {text-align，font-size，color，margin，padding，display，width，height}' - Jeannie

我在config.js中添加了config.allowedContent = true;，但仍然不起作用。 - devpro

Answer 2

我找到了一个解决方案。

这会关闭过滤，虽然可以工作，但不是一个好主意...

config.allowedContent = true;

使用内容字符串来处理id等属性是有效的，但对于类和样式属性不行，因为需要用()和{}进行类和样式过滤。

因此，我建议允许在编辑器中使用任何类：

config.extraAllowedContent = '*(*)';

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

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

只允许任何标签使用 class="asdf1" 和 class="asdf2"：

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

所以您必须指定类名。

仅允许在 p 标签中使用 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];*(*);*{*}';

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

- Tommy at LIW

---

请参阅 ckEditor文档中的extraAllowedContent 以获取更多信息。 - doub1ejack

Answer 3

编辑：这个答案是给那些在drupal中使用ckeditor模块的人。

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

这个答案是从这里复制的。所有的功劳归原作者所有。

进入“管理 >> 配置 >> CKEditor”，在“配置文件”下选择您的配置文件（例如Full）。

编辑该配置文件，在“高级选项 >> 自定义JavaScript配置”中添加config.allowedContent = true;。

不要忘记在“性能”选项卡下清空缓存。

- sepehr

---

这个回答仅适用于Drupal……但是还是谢谢，因为我只是在寻找Drupal的解决方案。 - LarS

@LarS 很有趣。我不记得为什么我认为这个问题与Drupal有关，但似乎它已经帮助了Drupal的开发者们。 - sepehr

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
}

您可以参考官方文档，了解允许内容规则的详细语法。链接如下：http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules

- Marty ZHANG

---

你之前有一个语法错误。具体来说，样式属性必须使用花括号{}而不是圆括号()设置。 - kamelkev

嗨kamelkev，我的回答是针对类而不是样式的，根据问题。基本上，这就是我正在使用的，我认为它没有错误。 - Marty ZHANG

谢谢你的回答，你的 *[id](*) 真的解决了我的问题。我之前尝试过 *[id,class]，但是不知道为什么它不能识别 class 属性。CKeditor 的文档有点像迷宫。 - GDmac

了解内容规则可能比禁用所有过滤更好，正如其他答案所建议的那样。 - Michael Martin-Smucker

Answer 5

如果您正在使用 CKEditor 4.x，您可以尝试：

config.allowedContent = true;

如果你正在使用 ckeditor 3.x，可能会遇到这个问题。

尝试将以下行放入 config.js 文件中。

config.ignoreEmptyParagraph = false;

- Wasif.Butt

---

config.ignoreEmptyParagraph=false; 是我尝试过的所有答案中唯一有效的解决方案。谢谢。 - Stefan

Answer 6

在ckeditor中，这被称为ACF（自动内容过滤器）。它会删除文本内容中所有不必要的标签。在config.js文件中使用此命令应该将其关闭。

config.allowedContent = true;

- Mari Selvan

Answer 7

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

HTML部分：

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

脚本

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

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

更多详细信息请参见：CK EDITOR 允许内容规则。

- Sanchit Gupta

Answer 8

如果您使用Drupal和称为“WYSIWYG”的模块以及CKEditor库，则以下解决方法可能是一个解决方案。对我而言，它非常有效。我在Drupal 7.33中使用CKEditor 4.4.5和WYSIWYG 2.2。我在此处找到了这个解决方法：https://www.drupal.org/node/1956778。

下面是代码：

我创建了一个自定义模块，并将以下代码放入“.module”文件中：

<?php
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['allowedContent'] = TRUE;
  }
}
?>

我希望这可以帮助其他Drupal用户。

- pyretta

Answer 9

请参考官方高级内容过滤器指南和插件集成教程。您将会发现更多关于这个强大功能的内容。此外，请查看config.extraAllowedContent，它似乎适合您的需求。

- oleq

Answer 10

我在使用 ckeditor 4.7.1 的 Chrome 浏览器时遇到了同样的问题。只需在 ckeditor instanceReady 中禁用 pasteFilter 属性即可。此属性会禁用 Advance Content Filter(ACF) 的所有过滤选项。

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });

- Pandi_Snkl