CKEditor 自动从 div 中删除类

我使用 CKEditor作为我的网站后端编辑器。它让我抓狂，因为它似乎想要在我按下源代码按钮的时候改变代码，让我觉得合适。例如，如果我点击源代码并创建一个 <div>..。

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

然后它没有明显的原因从 <div>剥离类，所以当我再次点击源代码时，它已经改为..。

<div>some content</div>

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

137839 次浏览
小开

禁用内容筛选

最简单的解决方案是进入 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[dir]';

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

小开

如果你正在使用的编辑器4.x，你可以尝试

config.allowedContent = true;

如果您使用的是 ckEditor 3.x，那么您可能使用的是 这个问题。

尝试在 config.js 中放入以下代码行

config.ignoreEmptyParagraph = false;
小开

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

你会发现更多关于这个强大的功能。也看到 Config.exAllowedContent，似乎适合你的需要。

小开

自 CKEditor v4.1以来，您可以在 CKEditor 的 config.js 中执行以下操作:

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

您可以参考 允许内容规则的详细语法的官方文档

小开

我发现切换到使用完整的 html 而不是过滤的 html (在文本格式下拉框的编辑器下面)是什么为我修复了这个问题。否则这种风格就会消失。

小开

我想添加这个 config.allowedContent = true; 需要添加到 ckedit or.config.js 文件中，而不是 config.js，config.js 没有为我做任何事情，但是将它添加到 ckedit or.config.js 的顶部区域保存了我的 div 类

小开

Edit : 这个答案适用于那些在 drupal 中使用 ckEditor 模块的用户。

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

本答案抄自 给你。所有学分归原作者所有。

进入“管理 > > 配置 > > CKEditor”; 在“配置文件”下，选择你的配置文件(例如“完整”)。

编辑该配置文件，并在“ Advanced Options > > Custom JavaScript configuration”中添加 config.allowedContent = true;。

enter image description here

别忘了在“ Performance tab”下刷新缓存

小开

我找到了解决办法。

关掉过滤器，它在工作，但不是个好主意。

config.allowedContent = true;

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

因此，我打赌允许编辑器中的任何类都是:

config.extraAllowedContent = '*(*)';

This allows any class and any inline style.

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”> ... ) :

config.extraAllowedContent = 'style';

说得更复杂一点:

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

希望这是个更好的解决办法。

小开

如果使用 drupal 的另一个选项是简单地添加您想要使用的 css 样式。这样它就不会去掉样式或类名。

所以在我的案例中，在 drupal 7的 css 选项卡下，简单地添加类似于

Facebook = span. icon-facebook2

还要检查是否启用了字体样式按钮

小开

如果在 CKEditor 库中使用 Drupal AND 名为“ WYSIWYG”的模块，那么下面的解决方案可能是一个解决方案。对我来说，它就像魔法一样有效。我在 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 用户有所帮助。

小开

这是所谓的 ACF (自动内容过滤器)在编辑器。删除所有不必要的标签，我们正在使用的文本内容。在 config.js 文件中使用这个命令应该关闭这个 ACK。

config.allowedContent = true;
小开

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

超文本标示语言

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

剧本

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

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

更多详情: CK 编辑允许内容规则

小开

我面临着同样的问题，在 chrome 编辑器4.7.1。只需在 ckEditor instanceReady 上禁用 pasteFilter 即可。此属性禁用高级内容筛选器(ACF)的所有筛选器选项。

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

提交答案