CKEditor 去除 <i> 标签

Posted 2023-02-16

【中文标题】CKEditor 去除 <i> 标签

【英文标题】：CKEditor strips <i> Tag

【发布时间】：2013-08-17 12:11:08

【问题描述】：

我正在尝试寻找避免使用 CKEditor 的解决方案，但旧的 FCKeditor 也会删除任何 <i> 标记从先前插入的内容到数据库。

案例：

我将 html 内容插入到数据库中，一些内容包含 <i> 元素。 我用 CKEditor 来做这个。 一切正常，内容显示在网页上。 但是当我想编辑之前插入的内容时，<i> 元素不见了。

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

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

当然，如果我禁用编辑器，文本区域中的内容会正常显示。

【问题讨论】：

关于这个还有另一个 SO 问题，其中一个人展示了一种允许空标签的广泛方法：***.com/a/25016231/2418655

我通过从项目中删除 CKEditor（我非常喜欢它）并在没有所见即所得的情况下使用 codemirror/jsbeautify 消除了这个问题。可能不是大多数人的选择。

【参考方案1】：

当使用 protectedSource 解决方案时，i 标签不再被剥离，但img 标签停止显示在 CKEditor 的 WYSIWIG 模式（我使用的是 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 ) 函数之外。

【讨论】：

这对我来说似乎是最明智的方式。事后添加的羞耻答案没有得到太多认可。

另见***.com/questions/44417887/…

我在this related Drupal issue 中捆绑了各种修复。此解决方案修复了 2 个问题：HTML 过滤根本不允许 <i> 标签，并且 ACF 默认情况下无论如何都会清理它们。

【参考方案2】：

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

我从drupal forum得到的原始答案

修复或调整（你可以命名）是在 ckeditors config.js 中设置以下内容：

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

感谢 Spasticdonkey 将我指向链接。

【讨论】：

不，你看不到所见即所得区域的图标。但是当你查看所见即所得编辑器的Source时，你会看到。

我搜索了网络，这是唯一可行的方法。现在我必须修改它以保留空 div 和其他内容。

感谢您的解决方案。它有帮助。

在 2.6.3 版本中我添加了 FCKConfig.ProtectedSource.Add(/]*>/g);这是有效的

进行此更改后，我尝试将其缩小，但我收到了由该行引起的错误

【参考方案3】：

这对我有用

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

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

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

第一行几乎关闭了高级过滤

第二行是允许所有类 ()、任何样式 和任何属性 [*] 用于 p、div、li 和 ul。

最后一行是空标签...此行适用于图像...我发现如果您使用 config.protectedSource.push(/]*>/g); 它会在编辑时去除标签。

【讨论】：

非常好@Alauddin。我尝试了此页面和其他地方的所有内容。你的解决方案对我有用。非常感激！问题（次要细节）：有没有办法保留 HTML 源代码的缩进？

非常感谢。这是 Drupal 上唯一可行的解​​决方案！

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

    );

);

【讨论】：

不可能，小部件是在 4.3 中引入的

【参考方案5】：

有两个可能的问题：

了解Advanced Content Filter。 CKEditor 正在删除不允许的元素，但您可以扩展过滤器的规则。

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

（不久的）将来可能的解决方案之一是使用Widgets system 来处理那些空元素。但是现在我建议你检查CKEDITOR.htmlDataProcessor和short guide如何使用它。

【参考方案6】：

我找到了一个永久的解决方案。实际上发生了什么 ckeditor 只删除空白标签。无论标签是什么，可能是 <i> 标签或 <span> 标签

如果您使用任何图标，如 font-awesome、maeterlize 图标等... 您可以在 config.js 文件中使用以下代码来停止它

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

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

【参考方案7】：

CKEditor 4 移除了 emtpy 标记，因此您可以在不更改任何配置设置的情况下进行操作。

替换

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

有

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

现在<i></i>标签有内容，即 ，所以CKEditor不会删除那个标签。