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’)来隐藏模态框，如下图所示。