Question

我正试图找到一个避免CKEditor的解决方案，但是旧的FCKeditor也会删除任何一个 标记从之前插入的内容到数据库。

案例：

我将html内容插入数据库，某些内容包含元素。我是用CKEditor做的。一切都很完美，内容显示在网页上。但是，当我想编辑以前插入的内容时，元素将丢失。

在我的具体案例中，我使用：

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

当然，如果我禁用编辑器，内容会在textarea中显示得很好。

Answer 1

当使用protectedSource解决方案时，i标签不再被剥离，但img标签在CKEditor的WYSIWIG模式中停止显示（我使用的是4.3.1）。对我来说效果更好的解决方案是使用i

禁用删除空CKEDITOR.dtd.$removeEmpty标记

例如，我在config.js中添加了以下内容

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

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

Answer 2

我找到了这个特定问题的解决方案，我遇到了标记

我从drupal forum获得的原始答案

修复或调整（您为其命名）是将以下内容设置为ckeditors config.js：

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

感谢 Spasticdonkey 指示我链接。

Answer 3

这对我有用

在drupal ckeditor配置文件设置中以相同顺序添加以下3行代码管理/配置/内容/ CKEditor的/编辑/全

高级选项＆gt;＆gt;自定义JavaScript配置

＆＃13;

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

＆＃13;

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

第二行允许所有类（），任何样式{}以及p，div，li和ul的任何属性[*]。

最后一行是空标签...这条线适用于图像...我发现如果你使用 config.protectedSource.push（/] *＆GT;＆LT; / I /克）; 它在编辑时剥离标签。

Answer 4

for 4.3 version 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' );
        },

    });
}

}）;

Answer 5

有两个可能的问题：

了解Advanced Content Filter。 CKEditor正在删除不允许的元素，但您可以扩展过滤规则。
但是，如果问题是CKEditor删除了空的元素，那么您需要找到其他方法来使用它。 CKEditor不是WYSIWYG网站建设者。它是一个文档编辑器，因此加载的内容必须具有含义。空内联元素没有任何意义，因此它被删除，因为否则编辑器不知道如何处理它。

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

Answer 6

我找到了一个永久的解决方案。实际上ckeditor只删除了空白标签。无论标签是什么，可以b 标签或标签

如果您使用任何图标，如font-awesome，maeterlize icon等... 您可以使用config.js文件

中的以下代码来停止它

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

如果您使用更多空白标签，则需要在$removeEmpty

之后添加标签名称

Answer 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>

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

CKEditor剥离<i>标记</i>

7 个答案: