Question

我有一个CKeditor实例（版本4.1.2），其工具栏中有字体，大小，文本和背景颜色按钮，都是完全默认的。

通过替换从数据库加载内容的<textarea>来创建。

当加载的html包含以下元素时：

<h3><font color="red">Big Red Heading</font></h3>

CKeditor只是剥离标签，离开：

<h3>Big Red Heading</h3>

然而，我的期望（根据文档）是它应该将其转换为：

<h3><span style="color:red">Big Red Heading</span></h3>

（它也会以同样的方式剥离带有大小和面部属性的标签）。

我没有更改allowedContent或colorButton_foreStyle，或任何其他配置设置应该对此问题产生任何影响。我已经尝试删除所有自定义配置（保留编辑器的绝对默认实例），但它仍然会发生。

任何人都可以解释为什么会发生这种情况，以及如何解决这个问题？

感谢。

编辑：CKeditor来源中colorButton_foreStyle的默认值设置如下：

    CKEDITOR.config.colorButton_foreStyle = {
        element: 'span',
        styles: { 'color': '#(color)' },
        overrides: [ { element: 'font', attributes: { 'color': null } } ]
    };

...这就是为什么我预计它会自动转换字体标签..？

Answer 1

CKEditor没有默认定义所有可能的转换。有一套它们将来会被扩大，但这个特定的尚未定义。

来自Advanced Content Filter guide - content transformations：

目前，我们仅针对少数编辑器功能定义了内容转换，但在未来版本中它们的数量将会增加。

所以，有两种解决方案：

如果您想保留font代码，请通过定义config.extraAllowedContent来扩展高级内容过滤器设置，并更改HTML output sample中的font插件设置。
如果您想自动将font标签转换为较新的标签，则可以添加新的转换。阅读filter#addTransformations doc。

Answer 2

我在CKeditor 4中遇到了同样的问题。我搜索但我没有得到解决方案。但我需要它，所以我在js中创建了自己的方法。它工作得很好。

我创建了ownFunctoin：

function ConvertFontTagToSpanTag（str）{

        var startIndex = str.indexOf('<font');
        while (startIndex >= 0) {               

            var endIndex = str.substring(startIndex).indexOf('>');
            var subString1 = str.substring(startIndex, (startIndex + endIndex) + 1);
            var subString2 = subString1;              

            var mapObj = {
                size: "font-size:",
                face: "font-family:",
                color: "color:"
            };
            subString2 = subString2.replace(/size|face|color/gi, function (matched) {
                return mapObj[matched];
            });

            subString2 = subString2.replace(/['"]/g, ';');
            subString2 = subString2.replace(/=;/g, '');

            subString2 = subString2.replace('font', 'span');
            if (subString2.length > 6) {
                subString2 = [subString2.slice(0, 6), 'style=\"', subString2.slice(6)].join('');
                subString2 = [subString2.slice(0, subString2.length - 1), '\"', subString2.slice(subString2.length - 1)].join('');
            }

            //Converting Font-size           
            var sizeIndex = subString2.indexOf('font-size:');
            if (sizeIndex >= 0) {
                var sizeEndIndex = subString2.substring(sizeIndex).indexOf(';');
                var size = subString2.substring(sizeIndex + 10, (sizeIndex + sizeEndIndex));
                //Removing Font size
                subString2 = subString2.slice(0, (sizeIndex + sizeEndIndex) - 1) + subString2.slice((sizeIndex + sizeEndIndex));                  
                //Adding Font Size
                subString2 = [subString2.slice(0, (sizeIndex + sizeEndIndex)-1), ConvertSpanFontSize(size), subString2.slice((sizeIndex + sizeEndIndex)-1)].join('');

            }
            //end

            str = str.replace(subString1, subString2);

            startIndex = str.indexOf('<font');            

        }
        str = str.replace(/font>/g, 'span>');
        return str;

    }

    function ConvertSpanFontSize(size) {
        switch (size) {
            case '1': return '0.63em';
            case '2': return '0.82em';
            case '3': return '1.0em';
            case '4': return '1.13em';
            case '5': return '1.5em';
            case '6': return '2em';
            case '7': return '3em';                
            default: return '4em';
        }

...干杯！谢谢

CKeditor剥离字体标签而不是转换为span

2 个答案: