Summernote實(shí)現(xiàn)圖片上傳功能的簡單方法
還是接著之前說過的最近在寫一個(gè)BootStrap網(wǎng)頁....然后要用富文本編輯器，隨便搜了下就選了這貨
然后發(fā)現(xiàn)了很尷尬的問題...圖片上傳功能無效....然后各種搜索各種無果...最后怒翻Summernote官方文檔總算解決了，總之寫下解決過程
后端部分就不提供代碼了，滿大街都是，這里假設(shè)后端拿到上傳文件后返回文件的地址
首先附上參考資料：Summernote官方開發(fā)文檔
簡單說下Summernote的圖片上傳功能實(shí)現(xiàn)方案
首先根據(jù)官方文檔提供的API，掛接文件上傳事件，然后自己用JS重新上傳文件，最后用API把圖片插入到編輯框內(nèi)即可
本來是挺簡單的問題，可惜官方也不知道為什么居然更改了接口寫法...然后網(wǎng)上搜到的資料全都坑掉了....雖然也有我搜的不夠深入的原因
總之整理下核心的兩個(gè)SummernoteAPI，接管文件上傳事件和插入圖片，根據(jù)官方文檔說明格式如下
//接管圖片上傳事件
$('#summernote').summernote({
callbacks: {
onImageUpload: function(files) {
// 上傳圖片到服務(wù)器并且插入圖片到編輯框
}
}
});
//插入圖片
$('#summernote').summernote('insertImage', url, filename);
//更加詳細(xì)的解釋見上面提供的官網(wǎng)API文檔
然后就可以很輕松的實(shí)現(xiàn)支持上傳圖片的Summernote編輯框了
代碼如下：
$('#summernote').summernote({
callbacks: {
onImageUpload: function(files) {
//上傳圖片到服務(wù)器，使用了formData對象，至于兼容性...據(jù)說對低版本IE不太友好
var formData = new FormData();
formData.append('file',files[0]);
$.ajax({
url : 'upload',//后臺文件上傳接口
type : 'POST',
data : formData,
processData : false,
contentType : false,
success : function(data) {
$('#summernote').summernote('insertImage',data,'img');
}
});
}
}
});
最后，這只實(shí)現(xiàn)了一個(gè)最簡單的，兼容性不怎樣而且完全不考慮錯(cuò)誤異常提示的圖片上傳功能而已....請根據(jù)需要自行修改
以上這篇Summernote實(shí)現(xiàn)圖片上傳功能的簡單方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Bootstrap glyphicons字體圖標(biāo)
本章將講解Bootstrap glyphicons字體圖標(biāo)，并通過一些實(shí)例了解它的使用，字體圖標(biāo)是在 Web 項(xiàng)目中使用的圖標(biāo)字體。字體圖標(biāo)在下載的Bootstrap的fonts文件夾中2016-01-01
本篇文章主要介紹了詳解tween.js 中文使用指南，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
低代碼從0到1創(chuàng)建小程序項(xiàng)目詳解流程
低代碼作為開發(fā)工具類的產(chǎn)品，需要有從0到1體系化的教程才可以，而且還得有教師進(jìn)行輔助。否則，學(xué)習(xí)低代碼是有難度的，入門很難。因?yàn)榇蠹伊?xí)慣了用代碼編程，一下子過度到可視化編程，有一個(gè)思路上的轉(zhuǎn)變2022-08-08
考慮到 JS 中的錯(cuò)誤可比服務(wù)器端的代碼產(chǎn)生的錯(cuò)誤要多得多，并且還難以發(fā)現(xiàn)及修正，所以 JS 代碼必須有異常處理以及全局一場處理。2015-06-06
suggestion開發(fā)小結(jié)以及對鍵盤事件的總結(jié)（針對中文輸入法狀態(tài)）
suggestion開發(fā)小結(jié)以及對鍵盤事件的總結(jié)（針對中文輸入法狀態(tài)）,需要的朋友可以參考下。2011-12-12
這篇文章主要介紹了比例尺、縮略圖、平移縮放之百度地圖添加控件方法,大家都知道百度地圖API中提供了豐富的控件，您還可以通過Control類來實(shí)現(xiàn)自定義控件，需要的朋友可以參考下2015-08-08
荷蘭程序員Gabor de Mooij提出了一種比Object.create()更好的新方法，他稱這種方法為"極簡主義法"（minimalist approach）。下面通過本文給大家分享極簡主義法編寫JavaScript類的相關(guān)知識，一起看看吧2017-11-11
要慎用readonly和disabled, 指定了disabled的表單,在submit時(shí),不會把它的值傳出去, 如下所示,有兩個(gè)text,一個(gè)是readonly一個(gè)是disabled,submit后,只能發(fā)送那個(gè)不是disabled的,注意地址欄的值. 要保存到本地,因?yàn)閟ubmit了,不然,看不到效果.2008-04-04
這篇文章主要介紹了JavaScript 防篡改對象的用法示例，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以參考下2021-04-04
淺談javascript:兩種注釋,聲明變量,定義函數(shù)
下面小編就為大家?guī)硪黄獪\談javascript:兩種注釋,聲明變量,定義函數(shù)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10