`

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

 
阅读更多

一、项目用到了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、祝贺你,问题彻底解决
分享到:
评论

相关推荐

    ckeditor 4.1 两端对齐按钮支持中文两端对齐补丁

    "readme.txt"文件通常包含更详尽的介绍,包括补丁的背景、目的、适用环境、注意事项,以及可能遇到的问题和解决方案。它可能会提醒用户,CKEditor的更新可能覆盖这些改动,因此在更新编辑器时需要再次应用此补丁,...

    修改WordPress中文章编辑器的样式的方法详解

    不过,WordPress提供了一个解决方案,允许你通过自定义CSS样式表来改变编辑器的视觉呈现,使其更接近前端的样式。 要实现这一目标,你可以遵循以下步骤: 1. **创建CSS样式表**: 首先,在你的主题根目录下创建一...

    BootstrapPlugin - wysihtml5 使用笔记

    总的来说,BootstrapPlugin - wysihtml5 是一个优秀的富文本编辑器解决方案,它结合了Bootstrap的美观设计和wysihtml5的高效编辑功能,为开发者提供了一种简单而强大的工具,使得创建交互式、用户友好的内容编辑界面...

    信息管理系统前台源码html源码管理模板.zip

    style.css是主样式表,通常用于全局样式设定,影响整个网站的外观。 2. \editor\:这可能是一个富文本编辑器的目录,用于用户在系统中创建和编辑内容。编辑器的实现可能包括了JavaScript库,如CKEditor或TinyMCE,...

    vuehtmleditor实现HTML编辑器的Vuejs组件

    "vue-html-editor" 是一个基于Vue.js的HTML编辑器组件,它提供了丰富的文本编辑功能,如字体样式调整、段落格式设置、列表、链接插入、图片上传等。这个组件通常通过`npm`或`yarn`安装到项目中,然后在Vue组件内导入...

    asp.net中使用Fckeditor制作在线编辑器

    如果你的项目需要长期维护,考虑使用更现代的解决方案可能是个好主意。 总之,通过本文档,你应该了解了如何在ASP.NET项目中使用FCKeditor创建一个在线编辑器的基本步骤。这只是一个基础的实现,你还可以根据需求...

    How to Create WYSIWYG Editor.zip

    同时,为了提高兼容性和性能,你可能还需要引入第三方库,如TinyMCE或CKEditor,它们提供了更完善的解决方案。 总之,创建一个WYSIWYG编辑器是一个综合性的任务,涉及到JavaScript的事件处理、DOM操作、以及对...

    基于ASP的DIV+CSS 企业网站管理系统源码 ASP源码

    【ASP技术介绍】 ASP(Active Server Pages)是微软公司推出的一种...总结起来,这个ASP源码包是一个完整的网站解决方案,涵盖了网页设计、后端开发和用户体验等多个方面,对于学习和实践Web开发技术具有很大的帮助。

    带有 helperscripts 文件夹的freetextbox 控件

    如果你无法找到,可以尝试以下解决方案: 1. **官方下载**:访问FREETEXTBOX的官方网站,查找最新版本的控件包,通常完整版会包含所有必需的文件。 2. **社区资源**:在开发者论坛或GitHub等开源社区搜索,其他...

    在线编辑器添加设置行距功能(兼容ie和firefox)

    7. **条件注释与浏览器嗅探**:在处理IE兼容性问题时,可能需要使用到条件注释(Conditional Comments)或者浏览器嗅探技术,以便针对IE提供特定的解决方案。 8. **polyfills**:对于不被某些浏览器支持的新特性,...

    如何实现textarea里的不同文本显示不同颜色

    总的来说,要实现 `textarea` 内不同文本显示不同颜色,可以通过JavaScript动态创建和插入元素来达到目的,但这种方法并不是标准的HTML/CSS解决方案,且存在一些限制。在实际项目中,选择一个支持富文本编辑的组件...

Global site tag (gtag.js) - Google Analytics