欢迎来到 万图素材
帮助中心

万图素材

DTCMS如何固定文章资讯中上传的图片最大宽度?

摘要:DTCMS如何固定文章资讯中上传的图片最大宽度?

  如题:目前文章资讯中的百度编辑器上传图片时,默认是图片本身的分辨率,这样就造成了上传后的图片可能在显示文章时,超出范围,显示不全。

  想法:增加最大宽度的数值,目前测试得知为 680 为最好。参照网上的百度编辑器教程修改 ueditor.all.js 没有实现,发现本系统调用的是 ueditor.all.min.js 但 ueditor.all.min.js 文件打开后,是一个大段落,无法分清分行。

  请教:如何实现这个功能?

  因为ueditor.all.min.js未分行,无法操作,故将文章资讯填加和修改Html 调用 js 改为 ueditor.all.js,然后修改 ueditor.all.js代码 :

  一:单图上传

  单图上传的实现分别为单击按钮选择文件上传和拖拽文件到编辑区域实现上传两种方式

  1:点击按钮选择文件实现上传

  在百度编辑器源码的ueditor.all.js文件中的如下方法是实现点击按钮选择文件实现上传的js方法

 UE.plugin.register('simpleupload', function ()

  在上面的方法中找到如下设置img属性的方法

 loader.setAttribute

  然后加上

  //设置上传图片的最大宽度的设置

  loader.setAttribute('style','max-width:680px');

  这时候我们在点击按钮单图上传图片时图片的img标签上就会加上style='max-width:680px'的属性了,这样就实现了设置图片的最大宽度

  2:拖拽文件实现自动上传

  在百度编辑器源码的ueditor.all.js文件中的如下方法是实现拖拽文件实现自动上传的js方法

UE.plugin.register('autoupload', function ()

  在上面的方法中找到如下设置img属性的方法

 loader.setAttribute

  然后加上

  //设置上传图片的最大宽度的设置

 loader.setAttribute('style','max-width:680px');

  这时候我们在拖拽文件实现自动上传时图片的img标签上就会加上style='max-width:680px'的属性了,这样就实现了设置图片的最大宽度

  二:多图上传

  在ueditor.all.js文件中的如下方法是实现多图上传的js方法

 UE.commands['insertimage']

  在上面的方法中找到<img src,在这里我们可以找到两个,这个分别是多图上传时选择一张图片和选择多张图片的img标签属性设置

  1:在opt.length == 1 的判断为true中是只选择一张图片的img标签属性设置,这里设置img的最大宽度的具体实现如下

  (1):删除如下代码 

(ci.width ? 'width="' + ci.width + '" ' : '') +

  (2):将如下代码

 (ci['floatStyle'] == 'left' || ci['floatStyle'] == 'right' ? ' style="float:' + ci['floatStyle'] + ';"' : '') +

  改为: 

(ci['floatStyle'] == 'left' || ci['floatStyle'] == 'right' ? ' style="max-width:680px;float:' + ci['floatStyle'] + ';"' : 'style="max-width:680px;"') +

  这样我们在多图上传时选择一张图片上传时时图片的img标签上就会加上style='max-width:680px'的属性了,这样就实现了设置图片的最大宽度

  2:在opt.length == 1 的判断为false中是选择多张图片的img标签属性设置,这里设置img的最大宽度的具体实现如下

  (1):删除如下代码

 (ci.width ? 'width="' + ci.width + '" ' : '') +

  (2):将如下代码

 ' style="' + (ci['floatStyle'] && ci['floatStyle'] != 'center' ? 'float:' + ci['floatStyle'] + ';' : '') +

  改为 

' style="max-width:680px;' + (ci['floatStyle'] && ci['floatStyle'] != 'center' ? 'float:' + ci['floatStyle'] + ';' : '') +

  这样我们在多图上传时选择多张图片上传时时图片的img标签上就会加上style='max-width:680px'的属性了,这样就实现了设置图片的最大宽度。


商品评价(0)

后面还有条评论,点击查看>>
联系我们
Q Q:3078847178
电话:3078847178
时间:09:00 - 19:00
地址:广东省清远市清城区百家大街101号