145

我在我的网站上使用CKEditor作为后端编辑器。尽管它似乎想将代码更改为每当我按下源按钮时它认为合适的方式，但它正在驱使我绕弯。例如，如果我点击源并创建一个<div>...

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

然后它无缘无故地从<div>.

<div>some content</div>

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

4

13 回答 13

292

禁用内容过滤

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

config.allowedContent = true;

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

配置内容过滤

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

例如，您可以扩展默认 CKEditor 的配置以接受所有 div 类：

config.extraAllowedContent = 'div(*)';

或者一些引导程序的东西：

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

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

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

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

于 2013-03-27T13:24:51.760 回答
65

我找到了解决方案。

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

config.allowedContent = true;

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

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

config.extraAllowedContent = '*(*)';

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

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">...</style>）：

config.extraAllowedContent = 'style';

再复杂一点：

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

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

于 2014-08-07T12:54:14.407 回答
16

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

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

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

转到“管理>>配置>>CKEditor”；在个人资料下，选择您的个人资料（例如完整）。

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

在此处输入图像描述

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

于 2014-01-12T17:37:56.960 回答
14

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

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

Allowed Content Rules 的详细语法可以参考官方文档

于 2013-06-06T02:22:57.173 回答
10

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

config.allowedContent = true;

如果您使用的是 ckeditor 3.x，您可能会遇到此问题。

尝试将以下行放入 config.js

config.ignoreEmptyParagraph = false;
于 2013-03-27T13:30:06.813 回答
10

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

config.allowedContent = true;
于 2017-02-06T12:28:53.330 回答
6

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

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

于 2013-03-27T15:20:46.830 回答
5

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

HTML

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

脚本

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

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

更多详情：CK EDITOR 允许的内容规则

于 2017-04-28T13:17:47.387 回答
4

如果您将 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 用户有所帮助。

于 2014-11-20T11:19:53.657 回答
0

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

于 2013-10-30T14:13:13.020 回答
0

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

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

facebook=span.icon-facebook2

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

于 2014-09-04T11:28:59.103 回答
0

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

于 2013-10-28T02:16:49.113 回答
0

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

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });
于 2018-01-05T14:44:20.147 回答