CKEditor去除<i>标签

Question

我正在寻找一个避免使用CKEditor但也不会剥离之前插入到数据库中的任何<i>标签的解决方案。

情况:

我使用CKEditor将HTML内容插入到数据库中，其中一些内容包含<i>元素。 一切都很完美，内容显示在网页上。 但是当我想编辑以前插入的内容时，<i>元素会消失。

在我的具体情况下，我使用：

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>

当然，如果我禁用编辑器，在文本区域中显示的内容就会很好。

- HenryW

---

有另一个关于这个问题的SO问题，其中一个人展示了一种允许空标签的广泛方法：https://dev59.com/QGMl5IYBdhLWcg3woYEu#25016231 - dhaupin

我通过从项目中删除 CKEditor（我非常喜欢）并使用 codemirror/jsbeautify 而不是所见即所得编辑器来消除了问题。这可能对大多数人来说不是一个选项。 - MrBoJangles

Answer 1

当使用protectedSource方案时，i标签不再被剥离，但是img标签在CKEditor的所见即所得模式中不再显示（我正在使用4.3.1版）。对我而言，更好的解决方案是使用CKEDITOR.dtd.$removeEmpty禁用删除空i标签。

例如，我将以下内容添加到config.js文件中：

// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty['i'] = false;

注意：这应该放在 CKEDITOR.editorConfig = function (config) 函数的外部。

- Mike Peterson

---

这对我来说似乎是最明智的方式。可惜事后添加的回答得不到太多认可。 - alexrussell

请参考 https://dev59.com/UqLia4cB1Zd3GeqPiWXU#52969977 - rémy

我已经将各种修复打包到了这个相关的Drupal问题中。这个解决方案解决了2个问题：HTML过滤器根本不允许<i>标签，而ACF默认情况下会清除它们。 - Timmah

Answer 2

我找到了解决我遇到的使用<i>标签的特定问题的方法。

我从Drupal论坛得到的答案。

修复或调整（随你怎么称呼）的方法是将以下内容设置到 ckeditors config.js 文件中：

// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><\/i>/g);

感谢Spasticdonkey提供链接。

- HenryW

---

不，您无法在所见即所得编辑器区域中看到图标。但是当您查看所见即所得编辑器的源代码时，您将会看到<i>标签。 - HenryW

我已经搜索了互联网，这是唯一有效的方法。现在我必须修改它以保留空的div和其他元素。 - tread

谢谢你提供的解决方案，它很有帮助。 - HddnTHA

在版本2.6.3中，我添加了FCKConfig.ProtectedSource.Add(/<i[^>]*></i>/g);，并且它正在工作。 - kamal.shalabe

在进行这个更改后，我尝试对其进行压缩，但是由于这行代码引起了错误。 - Joe Audette

Answer 3

以下是我使用的方法：

按照相同的顺序在Drupal CKEditor配置文件设置admin/config/content/ckeditor/edit/Full中添加以下3行代码

高级选项 >> 自定义JavaScript配置

    config.allowedContent = true;
    config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
    CKEDITOR.dtd.$removeEmpty.i = 0;

第一行基本上是关闭高级过滤

第二行是允许p、div、li和ul标签中的所有类（）、任何样式{}和任何属性[*]。

最后一行是针对空标签...这一行适用于图像...我发现，如果您使用 config.protectedSource.push(/]*></i>/g); 在编辑时会剥离掉空标签。

- Alauddin

---

非常好的@Alauddin。我尝试了这个页面和其他地方的所有内容。你的解决方案对我有用。非常感谢！问题（小细节）：是否有一种方法可以保留HTML源代码的缩进？ - Bisonbleu

非常感谢。这是Drupal上唯一可行的解决方案！ - Елин Й.

Answer 4

对于4.3版本的ckeditor

在config.js中（在配置部分之后）粘贴以下内容：

CKEDITOR.dtd.$removeEmpty['b'] = false;

编写带有代码的小部件

CKEDITOR.plugins.add( 'bwcaret', {
requires: ['widget'/*, 'richcombo'*/],

icons: 'bwcaret',

init: function( editor ) {

    editor.widgets.add( 'bwcaret', {

        button: 'Create a caret',

        template: '<b class="caret"></b>',


        allowedContent: 'b(!caret)',

        requiredContent: 'b(!caret)',

        upcast: function( element ) {
            return element.name == 'b' && element.hasClass( 'caret' );
        },

    });
}

});

- Andrey

---

不可能，小部件是在4.3中引入的。 - Wiktor Walc

Answer 5

我找到了一个永久性的解决方案。实际上，CKEditor只会删除空标签。无论标签是什么，可能是标签或标签

如果您正在使用任何像Font-Awesome、Maeterlize等图标... 您可以在config.js文件中使用以下代码停止它

CKEDITOR.dtd.$removeEmpty.span = false; 
CKEDITOR.dtd.$removeEmpty.i = false;

如果您使用了更多的空白标签，那么您需要在$removeEmpty后添加标签名称。

- Soubhagya Kumar Barik

Answer 6

CKEditor 4会删除空标签，因此您可以在不更改任何配置设置的情况下进行技巧操作。

替换

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>

With

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color">&nbsp;</i>

现在标签有内容，即 ，因此CKEditor不会删除该标签。

- Dhaval Bharadva

Answer 7

有两个可能的问题：

• 阅读有关高级内容过滤器的信息。CKEditor正在删除不允许的元素，但您可以扩展过滤器的规则。

• 但是，如果问题是CKEditor删除空的<i>元素，则需要找到其他使用它的方法。CKEditor不是所见即所得的网站构建器。它是一个文档编辑器，因此加载的内容必须具有意义。空的内联元素没有任何意义，因此被删除，否则编辑器将不知道如何处理它。

  在（近）将来的解决方案之一是使用小部件系统来处理这些空元素。但是现在我建议您检查CKEDITOR.htmlDataProcessor和简短指南如何使用它。

- Reinmar