CKEditor 自动从 div 中剥离类

Posted 2023-02-16

【中文标题】CKEditor 自动从 div 中剥离类

【英文标题】：CKEditor automatically strips classes from div

【发布时间】：2013-03-17 13:34:57

【问题描述】：

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

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

然后它无缘无故地从<div> 中删除了该类，因此当我再次点击源代码时，它已更改为...

<div>some content</div>

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

【问题讨论】：

经过大量挖掘，我找到了解决方案，如果您进入 config.js 并设置 CKEDITOR.config.allowedContent = true;然后它会阻止编辑器乱搞。

【参考方案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)';

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

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

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

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

【讨论】：

这将禁用该功能。配置比禁用更好。

@lain Simpson：您仍然需要将此问题设置为已回答。 Thx btw 寻找解决方案：D

此解决方案有时有效，有时无效。 style 属性被删除，只是有时，其余的会保留。

我正在使用一个叫做 Kentico 的东西，它使用这个编辑器。我添加了行“CKEDITOR.config.allowedContent = true;”到我的 config.js，但它仍在重新格式化我的 HTML，这会破坏我的引导代码，有人有什么想法吗？

我正在添加 config.allowedContent = true;，在 config.js 中但仍然无法正常工作

【参考方案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]';

等等等等

要允许样式标签（）：

config.extraAllowedContent = 'style';

稍微复杂一点：

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

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

【讨论】：

另见ckEditor docs for extraAllowedContent

10 星为您的回答

感谢您的努力！

【参考方案3】：

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

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

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

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

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

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

【讨论】：

这个答案仅适用于drupal ...但无论如何谢谢，因为我只是在寻找一个drupal解决方案。

@LarS 很有趣。我不记得为什么我认为这个问题与 drupal 有关，但似乎它帮助了 drupal 人。

【参考方案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可以参考官方文档

【讨论】：

上面有语法错误。具体来说，样式属性必须使用花括号 而不是括号 ()

嗨，kamelkev，根据问题，我的回答是针对 classes，而不是针对 styles。基本上我就是这么用的，我不认为它有错误。

感谢您的回答，您的*[id](*) 成功了，我之前尝试过*[id,class]，但这不允许以某种方式使用类属性。 CKeditor 文档有点像迷宫。

+1 正如许多其他答案所暗示的那样，了解内容规则可能是比禁用所有过滤更好的解决方案。

【参考方案5】：

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

config.allowedContent = true;

如果您使用的是 ckeditor 3.x，您可能拥有this issue。

尝试将以下行放入 config.js

config.ignoreEmptyParagraph = false;

在我尝试过的所有答案中，

config.ignoreEmptyParagraph=false; 是唯一对我有用的解决方案。谢谢。

【参考方案6】：

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

config.allowedContent = true;

【参考方案7】：

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

您会发现这个强大的功能远不止这些。另请参阅似乎适合您需求的config.extraAllowedContent。

【参考方案8】：

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

HTML

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

脚本

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

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

更多详情：CK EDITOR Allowed Content Rules

【参考方案9】：

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

【讨论】：

感谢这个 Drupal 的回答

【参考方案10】：

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

【参考方案11】：

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

【参考方案12】：

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

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

facebook=span.icon-facebook2

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

【参考方案13】：

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

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