summernote.js實(shí)際運(yùn)用中遇到的上傳圖片大小控制及bootstrap模態(tài)框嵌套關(guān)閉這兩個(gè)問(wèn)

madthumb 發(fā)布于2019-08-26 10:45 / 3905人閱讀

摘要：需求控制編輯框上傳的圖片不超過(guò)。從文件中找到如下圖代碼位置，選取需要上傳的圖片，獲取圖片的大小，將其當(dāng)做新增參數(shù)，給標(biāo)簽新增屬性。我的解決方法就是將在中加載出來(lái)的模態(tài)框中，關(guān)閉按鈕的屬性替換成代碼的事件，用來(lái)隱藏模態(tài)框，如下圖所示。

這里先看一下summernote.js模樣，如下圖，可以添加圖片、視頻、鏈接等。

問(wèn)題一：summernote.js在編輯框里具體是否有限制圖片的大小，這個(gè)我也沒(méi)有仔細(xì)研究，我只針對(duì)我的需求進(jìn)行了修改。

需求：控制編輯框上傳的圖片不超過(guò)10M。

從summernote.js文件中找到如下圖代碼位置，選取需要上傳的圖片，獲取圖片的大小，將其當(dāng)做新增參數(shù)（size），給img標(biāo)簽新增data-filesize屬性。

在編輯框添加完圖片之后，生成的HTML就如下圖所示。

獲取img標(biāo)簽的data-filesize屬性，求編輯框中所有圖片的大小，判斷一下即可。

上面的操作是判斷編輯框中添加的所有圖片的大小不超過(guò)10M

下面如圖，在選擇圖片的時(shí)候添加如下判斷，只是對(duì)本次上傳的單張或多張圖片的大小進(jìn)行判斷

問(wèn)題二：summernote.js與bootstrap模態(tài)框嵌套，關(guān)閉子模態(tài)框的同時(shí)，父模態(tài)框也關(guān)閉的問(wèn)題

如下圖所示，當(dāng)點(diǎn)擊子模態(tài)框的關(guān)閉按鈕時(shí)，連同父模態(tài)框也一同關(guān)閉。

我的解決方法就是將在summernote.js中加載出來(lái)的模態(tài)框中，‘關(guān)閉’按鈕的data-dimiss屬性替換成js代碼的click事件，用a.modal("hide")來(lái)隱藏模態(tài)框，如下圖所示。

云服務(wù)器 GPU云服務(wù)器 bootstrap模態(tài)窗口上傳及顯示圖片php 上傳到云服務(wù)器圖片及視頻上傳資料圖片大小限制

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106715.html

相關(guān)文章

summernote編輯器插件使用筆記

摘要：由于需要的編輯器功能比較簡(jiǎn)單，不需要太多復(fù)雜功能，所以選擇了一款特別輕量的插件，而且后臺(tái)操作也很簡(jiǎn)單。關(guān)于圖片上傳提交按鍵等回調(diào)函數(shù)也是在中，詳見(jiàn)部分。初始化一個(gè)編輯器很簡(jiǎn)單。這次項(xiàng)目中需要用到編輯器插件，于是上網(wǎng)查了一下。由于需要的編輯器功能比較簡(jiǎn)單，不需要太多復(fù)雜功能，所以選擇了一款特別輕量的summernote插件，而且后臺(tái)操作也很簡(jiǎn)單。官網(wǎng)：http://summernote...

printempw 2019-08-19 18:18 評(píng)論0 收藏0
JavaScript 資源大全中文版

摘要：官網(wǎng)全新的靜態(tài)包管理器。官網(wǎng)一個(gè)整合和官網(wǎng)的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫(xiě)前端代碼的下一代包管理器。官網(wǎng)小巧的兼容的所見(jiàn)即所得的富文本編輯器。官網(wǎng)富文本編輯器。官網(wǎng)由制作，適用于每天寫(xiě)作的富文本編輯器。 1. 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。 npm：npm 是 javascript 的包管理器。官網(wǎng) cnpm：cnpm 是由于國(guó)...

jzman 2019-08-23 17:18 評(píng)論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉(zhuǎn)載來(lái)源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶(hù)端包管理器。一個(gè)整合和的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫(xiě)前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶(hù)數(shù)據(jù)。轉(zhuǎn)載來(lái)源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評(píng)論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉(zhuǎn)載來(lái)源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶(hù)端包管理器。一個(gè)整合和的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫(xiě)前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶(hù)數(shù)據(jù)。轉(zhuǎn)載來(lái)源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 評(píng)論0 收藏0
javascript功能插件大集合，寫(xiě)前端的親們記得收藏

摘要：一個(gè)專(zhuān)注于瀏覽器端和兼容的包管理器。一個(gè)整合和的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫(xiě)前端代碼的下一代包管理器。完全插件化的工具，能在中識(shí)別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過(guò)充分測(cè)試和記錄數(shù)據(jù)結(jié)構(gòu)的庫(kù)。【導(dǎo)讀】：GitHub 上有一個(gè) Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護(hù)的 JS 資源列表...

cfanr 2019-08-20 10:34 評(píng)論0 收藏0