漂泊的云,停留的心!
人的头脑太复杂,时间过得久……

帝国CMS(EmpireCMS)7.5 后台默认编缉器及CKEditor编辑器通过disallowedContent属性删除上传图片默认设置宽高

不知道大家有没有用过帝国帝国CMS(EmpireCMS)7.5后台编缉器PiaoYun.CC小编发现这个编辑器会根据图片尺寸大小默认预设图片的width和height!
在PC端看着倒是正常,但用移动设备访问网页的时候,会因为img里的width和height占位或显示不全,造成排版异常的问题。

废话不多说,下面跟大家分享下修改这个问题的解决办法!先来看看帝国CMS7.5编缉器默认设置宽高的效果图:

后台:/e/admin/ecmseditor/infoeditor/plugins/image/dialogs/image.js
前台:/e/data/ecmseditor/infoeditor/plugins/image/dialogs/image.js

打开上面路径的文件,搜索下面的代码

方法一:

搜索:

d.setValue(g);f&&f.setValue(c)

改成:

d.setValue(null);f&&f.setValue(null)

如图:

方法二:

this.imageElement.getAttribute("style") || this.imageElement.removeAttribute("style");

修改为以下代码:

this.imageElement.setAttribute("style")&&this.imageElement.removeAttribute("style");

PiaoYun.CC测试后发现2个方法时好时坏的,最总找到了CKEditor编辑器通过disallowedContent属性解决了这个疑难杂症!

方法三如下:

因为我完全不需要这部分冗余的代码,所以必须让插件不再自动添加宽高属性。经常手动删除这些代码还是比较烦人的,好在插件本身有提供内容过滤功能,通过设置disallowedContent属性的相应规则,可以在CKEditor中强制禁用相应的HTML内容,包括元素以及其属性、类(class)、内联样式(style)等等,强烈建议看官方文档,有详细DEMO演示

此外disallowedContent属性不仅可以在全局进行设置,也可以在调用CKEditor的时候单独设置(也就是创建CKEditor实例/对象的时候)。

这里结合我的情况说明下如何设置。首先是全局设置,在ckeditor中的config.js文件中,找到editorConfig并设置disallowedContent属性:

CKEDITOR.editorConfig = function( config ) {
    config.disallowedContent = 'img{width,height};img[width,height]';
};

如果此功能只需要在单独几个页面模块中用,那么在创建实例的方法replace里传入参数即可:

CKEDITOR.replace(
    "ckeditorId"
    ,{disallowedContent:'img{width,height};img[width,height]';
});

上面两种方式都可以实现在CKEditor中强制禁用img标签的style以及widht/height属性,这样文本编辑器中就不会出现冗余的代码,会被插件自动去除。另外额外提下,测试的时候要注意删除缓存,否则看不出修改的效果!

再说一个注意事项,disallowedContent属性只有在CKEditor 4.4以上的版本才有,对于老版本我就没办法了,也懒得去研究了。这里先看官方文档的这段说明:

The Disallowed Content feature was introduced in CKEditor 4.4 as a part of the Advanced Content Filter system which was introduced in CKEditor 4.1.

按照上面文档说明,这部分功能其实是属于CKEditor提供的高级内容过滤,disallowedContent就是黑名单模式,可以禁用和去除你不想出现在CKEditor编辑器中的HTML标签/属性/内联样式等代码。就像我遇到的情况,就是要禁用img标签的width和height内联样式,防止与自定义的class产生冲突,也让代码看上去更加简洁干净!

当然也有对应的 白名单模式:allowedContent属性。 高级内容过滤器的功能貌似在4.1版本的时候就有了,但是没有黑白名单的功能,我英文不好也看不太懂,反正用4.4的就对了。

最后贴下灵感来源,主要还是从stackoverflow中得到了思路:CKEditor remove inline img style

方法四:

直接在piaoyun.cc.php中添加CSS样式控制即可
例:

<div id=“textcenter”>
    内容内容
    <img alt="piaoyun.cc.jpg" src="http://piaoyun.cc/d/file/piaoyun.cc/piaoyuncc2022012222.jpg" style="height: 496px; width: 800px;">
</div>

修改:
直接在piaoyun.cc.php中头部添加

<style>
    #textcenter img{
        width:95%!important;
        height:95%!important;
    }
</style>

即可。

解释:
不需要JS,也不需要更改其它。楼上有人说要把图片样式直接去掉,那样会改变PC端文章图片的。
直接在piaoyun.cc.php中修改,最完美。

相关资料参考:
解决CKEditor中img标签自动添加style样式的问题-禁止自动设置width和height-十有三博客

帝国CMS编辑器上传图片取消宽高的方法 – 007资源网

帝国CMS7.5默认编缉器删除上传图片默认设置宽高_6z6z下载站

赞(0)
未经允许不得转载:飘云 » 帝国CMS(EmpireCMS)7.5 后台默认编缉器及CKEditor编辑器通过disallowedContent属性删除上传图片默认设置宽高
分享到: 更多 (0)