ckeditor上传图片后取的内容存在style样式解决方案

最新推荐文章于 2024-05-23 15:45:55 发布

十点摆码

最新推荐文章于 2024-05-23 15:45:55 发布

阅读量2.8k

点赞数

分类专栏： editor 文章标签： editor ckeditor 富文本编译器

本文链接：https://blog.csdn.net/lovelichao12/article/details/70327825

版权

editor 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、项目用到了ckeditor插件，做完上传图片功能发现个问题，在将内容保存时文本img标签多了style样式属性，在PC端没有问题，但手机端显示异常，适配不了，经过多方面的研究，问题得到解决，晒出出解决办法，如下：

1、找到ckeditor插件路径下config.js文件

2、在里面加上如下配置：

CKEDITOR.on('instanceReady', function (ev) {
    var editor = ev.editor,
        dataProcessor = editor.dataProcessor,
        htmlFilter = dataProcessor && dataProcessor.htmlFilter;

    // Out self closing tags the HTML4 way, like <br>.
    dataProcessor.writer.selfClosingEnd = '>';

    // Make output formatting behave similar to FCKeditor
    var dtd = CKEDITOR.dtd;
    for (var e in CKEDITOR.tools.extend({}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent)) {
        dataProcessor.writer.setRules(e,
            {
                indent: true,
                breakBeforeOpen: true,
                breakAfterOpen: false,
                breakBeforeClose: !dtd[e]['#'],
                breakAfterClose: true
            });
    }

    // Output properties as attributes, not styles.
    htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                if (element.name == 'img') {
                    var style = element.attributes.style;
                    delete element.attributes.style;
                }

                if (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        },

        attributes:
            {
                style: function (value, element) {
                    // Return #RGB for background and border colors
                    return convertRGBToHex(value);
                }
            }
    });
});

3、祝贺你，问题彻底解决