CKEditor设置图片的宽高以适应PC端与手机端显示

原创 创建时间:2018-09-11 访问量:269 赞:0 踩:0

CKEditor在上传图片时,黙认的行内样式是图片的实际的宽度和高度,在单击“确定”按钮后,CKEditor就会将这个宽度和高度设置到行内样式中,这样在手机端显示就会显示不全;在PC端显示,如果显示宽度不够,图片会自已撑开,就不好看了。

下面我们将上传图片的黙认行内样式设置为max-width:100%;不设置高度,这样在PC与手机端都能够正常显示了。如果要设置图片具体的宽度与高度也可以自动拼接到行内样式中。

实现方式就是,我们首先将上传图片后自动获取到的图片宽高设置为0;将高级选项卡中的黙认行内样式设为max-height:100%;即可。

找到CKEditor图片上传对话框源码,ckeditor/plugins/image/dialogs/image.js

找到获取图片宽高的源码:

f=a.getContentElement("info","txtHeight"),g;b?c=g=0:(g=c.$.width,c=c.$.height);

将后面的g=c.$.width,c=c.$.height改成g=0,c=0,即:

f=a.getContentElement("info","txtHeight"),g;b?c=g=0:(g=0,c=0);

然后找到黙认行内样式代码:

requiredContent:"img{cke-xyz}",label:d.lang.common.cssStyle,validate:CKEDITOR.dialog.validate.inlineStyle(d.lang.common.invalidInlineStyle),"default":"",

在最后的default的后面填上值:

requiredContent:"img{cke-xyz}",label:d.lang.common.cssStyle,validate:CKEDITOR.dialog.validate.inlineStyle(d.lang.common.invalidInlineStyle),"default":"max-width:100%;",

这样就可以了。给出上传图片后的两张图片:

看看宽度那个输入框和高度输入框为空了吧,这样CKEditor就不会将图片的宽高拼接到行内样式中了。


看看高级行内样式中已经有了黙认的max-width:100%;了,如果前面的宽度和高度输入框中有值,就会在单击“确定”按钮后自动添加进来。也不影向自定义图片样式哦~~

评论
 我想说:
==已经到底了==
关注: 粉丝: 积分:
工联信息网
如有问题请致邮箱:need@glxxw2018.com(仅限本站无法查询到的资料);本站能够查询到的资料请关注“工联信息网”公众号,通过页面提供的资源码查询!
不良信息反馈及侵权投诉建议请致邮箱:accusation@glxxw2018.com