禁用内容过滤

Question

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

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

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

<div>some content</div>

我认为这种恼人的行为可以在config.js中关闭，但我一直在挖掘并且无法在文档中找到任何可以将其关闭的内容。

Answer 1

禁用内容过滤

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

config.allowedContent = true;

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

配置内容过滤

您还可以更精确地配置CKEditor's content filter，以仅允许您需要的这些元素，类，样式和属性。这个解决方案要好得多，因为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的规则。阅读更多关于：

Content filtering in CKEditor - 为什么需要内容过滤器。
Advanced Content Filter - 深入描述过滤机制。
Allowed content rules - 如何编写允许的内容规则。

Answer 2

我找到了解决方案。

这会关闭过滤，它会起作用，但不是一个好主意......

config.allowedContent = true;

使用内容字符串适用于id等，但不适用于类和样式属性，因为您有（）和{}用于类和样式过滤。

所以我的赌注是允许编辑器中的任何课程：

config.extraAllowedContent = '*(*)';

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

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

仅允许class =＆＃34; asdf1＆＃34;和class =＆＃34; asdf2＆＃34;对于任何标签：

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

（所以你必须指定类名）

仅允许class =＆＃34; asdf＆＃34;仅适用于p标签：

config.extraAllowedContent = 'p(asdf)';

允许任何标记的id属性：

config.extraAllowedContent = '*[id]';

等等

允许样式标记（＆lt;样式类型=＆＃34; text / css＆＃34;＆gt; ...＆lt; / style＆gt;）：

config.extraAllowedContent = 'style';

要复杂一点：

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

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

Answer 3

编辑：此答案适用于在drupal中使用ckeditor模块的人。

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

此答案是从here复制的。所有学分应归原作者所有。

转到“管理员＆gt;＆gt;配置＆gt;＆gt; CKEditor”;在“个人档案”下，选择您的个人资料（例如“完整”）。

修改该个人资料，并在“高级选项＆gt;＆gt;自定义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
}

您可以参考the detailed syntax of Allowed Content Rules

的官方文档

Answer 5

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

config.allowedContent = true;

如果您使用的是ckeditor 3.x，则可能需要this issue。

尝试在config.js

中添加以下行

config.ignoreEmptyParagraph = false;

Answer 6

这在ckeditor中被称为ACF（自动内容过滤器）。它删除了所有不一致的标记我们在文本内容中使用的内容。在config.js文件中使用此命令应该关闭此ACK。

config.allowedContent = true;

Answer 7

请参阅official Advanced Content Filter guide和plugin integration tutorial。

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

Answer 8

如果您使用Drupal和名为＆＃34; WYSIWYG＆＃34;使用CKEditor库，以下解决方法可能是一个解决方案。对我来说，它就像一个魅力。我在Drupal 7.33中使用CKEditor 4.4.5和WYSIWYG 2.2。我在这里找到了这个解决方法：https://www.drupal.org/node/1956778。

这是：我创建了一个自定义模块，并将以下代码放在＆＃34; .module＆＃34;文件：

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

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

Answer 9

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

<强> HTML

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

<强> SCRIPT

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

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

更多细节：CK EDITOR Allowed Content Rules

Answer 10

我发现切换到使用完整的html而不是过滤的html（在文本格式下拉框中的编辑器下面）是我解决这个问题的原因。否则风格就会消失。

Answer 11

我想添加这个config.allowedContent = true;需要添加到ckeditor.config.js文件而不是config.js，config.js对我没有任何作用，但将它添加到ckeditor.config.js的顶部区域保留了我的div类

Answer 12

如果使用drupal，另一个选项就是添加你想要使用的css样式。这样它就不会删除样式或类名。

所以在我的情况下，在drupal 7的css选项卡下只需添加类似

的内容

=实span.icon-facebook2

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

Answer 13

我在使用ckeditor 4.7.1的chrome上面临同样的问题。只需在ckeditor instanceReady上禁用pasteFilter。此属性将禁用高级内容过滤器（ACF）的所有过滤器选项。

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

CKEditor自动从div中删除类

13 个答案:

禁用内容过滤

配置内容过滤