乐趣区

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

这里先看一下 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’)来隐藏模态框,如下图所示。

退出移动版