CKEditor剥离<i>标签

Question

我正在尝试找到一个避免CKEditor的解决方案,但是旧的FCKeditor也会删除<i>之前插入的内容到db的任何 标记.

案件:

我将html内容插入到db中,一些内容包含<i>元素.我是用CKEditor做的.一切都很完美,内容显示在网页上.但是,当我想编辑以前插入的内容时,<i>元素丢失了.

在我的具体情况下,我使用:

<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

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

我从drupal论坛得到的原始答案

修复或调整(您为其命名)是将以下内容设置为ckeditors config.js:

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

感谢Spasticdonkey指点我的链接.

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

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

第二行是允许所有class(),任何样式{ }和p,div,li和ul的任何属性[*].

最后一行是空标记...这行与图像一起工作......我发现如果你使用config.protectedSource.push(/]*> </ i>/g); 它在编辑时剥离标签.

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

    });
}

});