2

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

它是通过替换<textarea>从数据库加载其内容的 a 创建的。

当加载的 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>

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

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

谁能解释为什么会发生这种情况，以及如何解决？

谢谢。

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

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

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

4

2 回答 2

3

CKEditor 没有默认定义所有可能的转换。有一组，未来会扩大，但具体的还没有定义。

来自高级内容过滤器指南 - 内容转换：

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

所以，有两种解决方案：

  1. 如果您想保留您的font标签，请通过定义config.extraAllowedContent和更改font插件设置来扩展高级内容过滤器设置，如HTML 输出示例。
  2. 如果您想自动将font标签转换为较新的等价物，则可以添加新的转换。filter#addTransformations在文档中阅读更多内容。
于 2013-07-13T21:03:12.900 回答
2

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

我创建了ownFuntoin：

函数 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';
        }

干杯...！谢谢

于 2015-08-19T05:38:01.473 回答