/*十有三博客*/
  • 首页
  • 关于本站
  • 网站地图
  • RSS订阅

解决CKEditor中img标签自动添加style样式的问题-禁止自动设置width和height

2017-03-17 十有三 2 浏览:2万+ Web前端 Javascript | 插件工具

在使用CKEditor的过程中发现,每次上传或添加图片的时候,总会自动给img标签添加width和height的style内联样式。由于网站本身对图片有进行自适应处理(添加了自适应的CSS),所以image插件的这种行为无异于画蛇添足。后来研究了下,找到了在CKEditor中禁止img自动添加宽高的方法!通过官方提供的disallowedContent属性可以解决这个问题!

这里先上个图说明下情况,可以看到CKEditor的image插件在你添加或上传图片的时候,会自动计算图片的宽高,然后在图像属性对话框中给你自动填上(假设图片宽336px,高度330px):

ckeditor上传和添加图片会自动加style样式

再查看下源码,就会发现插件已经给img标签添加了内联样式代码:style="height:330px;width:336px";

img标签的style代码

因为我完全不需要这部分冗余的代码,所以必须让插件不再自动添加宽高属性。经常手动删除这些代码还是比较烦人的,好在插件本身有提供内容过滤功能,通过设置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]';
};

全局设置禁止img的style

如果此功能只需要在单独几个页面模块中用,那么在创建实例的方法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.

官方属性说明截图1

官方属性说明截图2

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

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

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


作者:十有三

出处:https://shiyousan.com/post/636253649204480535

版权声明:本文采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。欢迎转载本文,转载请声明出处或保留此段声明。


  • 上一篇: Windows10中Virtualbox没办法选择和安装64位的Linux系统
  • 下一篇: 解决安卓中Outlook联系人无法同步两个手机号码的问题-手机2无法同步

相关文章
  • KindEditor禁止用户输入a标签链接以及只允许指定HTML标签输入的方法和技巧
  • 实现百度分享自定义或动态设置URL
  • CKFinder 3无法删除文件和文件夹出现提示:You cannot delete files in DEMO mode
  • JavaScript isNaN() 函数
  • 研究下CSS3的background-size属性
  • HTML使用相对路径获取各级目录下文件

文章分类

.NET技术 123 数据库 24 Web前端 21 网站建设运维 37 操作系统与应用 66 程序猿日常 11 开发工具 12 其他随笔 13

文章标签

ASP.NET ASP.NET MVC C# CSS HTML IIS Javascript Linux MongoDB MySql SQL SQL Server Visual Studio Windows系统 版本控制系统 插件工具 服务器 搞笑娱乐 好文分享 软件应用 生活知识 手机问题 随笔 网络知识 网站设计优化 网站维护 养生保健 异常处理 硬件设备 游戏攻略

热门文章

  • IIS8如何安装和使用URL重写工具-URL Rewrite
  • 林蛋大与楚中天,朱肚皮与朱月坡
  • 解决IE11安装升级失败和在安装前需要更新的问题
  • Windows Server 2012无法安装 .NET3.5-安装角色或功能失败,找不到源文件
  • VS重构重命名的快捷键

推荐文章

  • Visual Studio Community 2013无法折叠代码块
  • MongoDB小技巧:在命令提示符中通过任意路径执行MongoDB命令
  • 解决阿里云负载均衡网站打不开的问题-域名解析后IP无法ping通
  • 如何在ASP.NET的web.config配置文件中添加MIME类型
  • 操作系统和URL中斜杠/和反斜杠\之间的区别以及运用

友情链接

  • Passingwind的博客
  • 码友网

知识共享许可协议 CC BY-SA 4.0本站作品采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。
闽ICP备15003702号
闽公网安备 35020302035102号