summernote.js实际运用中遇到的上传图片大小控制及bootstrap模态框嵌套关闭这两个问题

2019-08-13

这里先看一下summernote.js模样,如下图,可以添加图片、视频、链接等。 图片描述

问题一:summernote.js在编辑框里具体是否有限制图片的大小,这个我也没有仔细研究,我只针对我的需求进行了修改。

需求:控制编辑框上传的图片不超过10M。

  • 从summernote.js文件中找到如下图代码位置,选取需要上传的图片,获取图片的大小,将其当做新增参数(size),给img标签新增data-filesize属性。

图片描述

  • 在编辑框添加完图片之后,生成的HTML就如下图所示。

图片描述

  • 获取img标签的data-filesize属性,求编辑框中所有图片的大小,判断一下即可。

图片描述上面的操作是判断编辑框中添加的所有图片的大小不超过10M

下面如图,在选择图片的时候添加如下判断,只是对本次上传的单张或多张图片的大小进行判断 图片描述

问题二:summernote.js与bootstrap模态框嵌套,关闭子模态框的同时,父模态框也关闭的问题

如下图所示,当点击子模态框的关闭按钮时,连同父模态框也一同关闭。 图片描述

我的解决方法就是将在summernote.js中加载出来的模态框中,‘关闭’按钮的data-dimiss属性替换成js代码的click事件,用a.modal('hide')来隐藏模态框,如下图所示。 图片描述

原文链接:segmentfault.com

上一篇:YAHOO 军规
下一篇:简单HTML5移动端(客户端)图片上传
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部