資訊專欄INFORMATION COLUMN
摘要：將創(chuàng)建好的對(duì)象，再插入到編輯器中注意這里不用方法因?yàn)樗麜?huì)額外的標(biāo)簽具體查看，另外當(dāng)選取本地文件的時(shí)候，此時(shí)的富文本編輯器會(huì)失去焦點(diǎn)，插入新的節(jié)點(diǎn)的時(shí)候，總是從起始點(diǎn)開(kāi)始插入，而非從當(dāng)前光標(biāo)的位置進(jìn)行插入。
1.上傳圖片至自己的服務(wù)器（這個(gè)官方都有例子，重點(diǎn)介紹附件上傳）
圖片上傳官方網(wǎng)址
// onChange callback
$("#summernote").summernote({
callbacks: {
onChange: function(contents, $editable) {
console.log("onChange:", contents, $editable);
}
}
});
// summernote.change
$("#summernote").on("summernote.change", function(we, contents, $editable) {
console.log("summernote"s content is changed.");
})
summernote是一款富文本編輯器，但是他上傳的圖片的時(shí)候，圖片會(huì)以二進(jìn)制的形式存入數(shù)據(jù)庫(kù)字段中，這時(shí)候就很占資源，所以我們希望圖片能存入自己的服務(wù)器，在字段中就以鏈接地址的形式存放，這時(shí)候就需要在上傳圖片的時(shí)候進(jìn)行處理，所以callbacks下面的onImageUpload進(jìn)行圖片文件的處理。
示例：
//初始化定義
var _this=this;
this.curEle=$("#"+this.id);
var fileUploadBtn=this.template;
this.curEle.summernote({
focus: true,
lang:"zh-CN", //中文說(shuō)明配置
placeholder:"請(qǐng)輸入內(nèi)容",
fontNames: ["宋體","微軟雅黑","楷體","黑體","隸書", "Arial", "Arial Black", "Comic Sans MS", "Courier New",
"Helvetica Neue", "Helvetica", "Impact", "Lucida Grande",
"Tahoma", "Times New Roman", "Verdana"],
height:400,
minHeight:300,
maxHeight:null,
toolbar: [
["style", ["style"]],
["font", ["bold", "italic", "underline", "clear"]],
["fontname", ["fontname"]],
["color", ["color"]],
["para", ["ul", "ol", "paragraph","height"]],
["table", ["table"]],
["insert", ["fileBtn","media", "link", "picture", "video"]],
["view", ["fullscreen"]]
],
buttons: {
fileBtn: fileUploadBtn
},
callbacks: {
onImageUpload: function (files,editor, $editable) {
_this.sendFile(files[0]);
}，
}
})
methods:{
sendFile(files){
var _this=this;
var data = new FormData();
data.append("file", files);
$.ajax({
data : data,
type : "POST",
url : SERVICE_URLS.commonUrl.uploadPic.path, //此處為圖片上傳服務(wù)器請(qǐng)求地址，返回的是圖片上傳后的路徑（例如：請(qǐng)求接口為http://120.96.35.20:8090/uploadPic）
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {//舉例data:{data:"http://www.test.com/a.jpg"}
_this.curEle.summernote("insertImage", data.data);
},
error:function(){
alert("上傳失敗");
}
});
},
template(context){ //此處為自定義附件上傳按鈕，如果只考慮圖片上傳請(qǐng)忽略
let _this=this;
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: " 附件",
tooltip: "文件上傳",
click: function () {
_this.visibleUpload=true; //控制上傳文件界面框可見(jiàn)性
setTimeout(function(){
_this.initUploader(); //初始化web uploader插件
},0)
}
});
return button.render(); // return button as jquery object
}
}
2.自定義創(chuàng)建附件按鈕，上傳至自己服務(wù)器。
首先介紹github上已經(jīng)存在的附件插件
uploadcare-summernotegithub鏈接地址
這是Summernote WYSIWYG編輯器的Uploadcare插件。它允許您的用戶從本地設(shè)備，社交網(wǎng)絡(luò)，云存儲(chǔ)上傳文件和圖像，而無(wú)需處理上傳所需的任何后端代碼。這句話意味著你上傳的文件存儲(chǔ)的位置不在你自己的服務(wù)器上。
當(dāng)然插件提供了定制存儲(chǔ)，有興趣的可以自己嘗試。綜合考慮插件的方法有點(diǎn)繁瑣不安全，不如自己寫個(gè)附件上傳按鈕。
示例如下
(1)創(chuàng)建自己的附件上傳按鈕 自定義按鈕, 如上template函數(shù)所示：
(2)上傳附件，此處用百度的web uploader插件，具體代碼不在細(xì)講（可看web uploader API）
(3)根據(jù)返回的數(shù)據(jù)，動(dòng)態(tài)創(chuàng)建DOM插入到summerNote編輯器中。
這里重點(diǎn)說(shuō)一下思路：
1.利用插件將本地文件上傳到我們的服務(wù)器
2.當(dāng)上傳完成后（uploadFinished），我們可根據(jù)成功返回的數(shù)據(jù),動(dòng)態(tài)的創(chuàng)建DOM對(duì)象。
3.將創(chuàng)建好的DOM對(duì)象，再插入到編輯器中
(注意：這里不用insertNode方法,因?yàn)樗麜?huì)額外的
initUploader(){
var _this=this;
var $list=$("#uploadList");
var state="pending";
var $btn=$("#toServerBtn");
var uploader = WebUploader.create({
swf: "https://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf",
server: SERVICE_URLS.commonUrl.uploadFile.path, //自己服務(wù)器的文件上傳接口
pick: "#fileUpload",
resize: false,
fileNumLimit: 10,
fileSizeLimit: 10 * 1024 * 1024,
});
this.uploader=uploader;
// 當(dāng)有文件被添加進(jìn)隊(duì)列的時(shí)候
uploader.on( "fileQueued", function( file ) {
$list.append( "" + file.name + "
" + "等待上傳
" + "取消上傳
" + "代碼沒(méi)有寫全，只是提供思路。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/108687.html
摘要：將創(chuàng)建好的對(duì)象，再插入到編輯器中注意這里不用方法因?yàn)樗麜?huì)額外的標(biāo)簽具體查看，另外當(dāng)選取本地文件的時(shí)候，此時(shí)的富文本編輯器會(huì)失去焦點(diǎn)，插入新的節(jié)點(diǎn)的時(shí)候，總是從起始點(diǎn)開(kāi)始插入，而非從當(dāng)前光標(biāo)的位置進(jìn)行插入。 1.上傳圖片至自己的服務(wù)器（這個(gè)官方都有例子，重點(diǎn)介紹附件上傳）圖片上傳官方網(wǎng)址 // onChange callback $(#summernote).summernote({ ...
摘要：微信的掃碼的登陸是要企業(yè)號(hào)的，對(duì)于一個(gè)學(xué)生狗哪來(lái)企業(yè)號(hào)，自己有個(gè)測(cè)試號(hào)內(nèi)心已十分滿足。自己決心做一個(gè)仿微信掃碼登陸，對(duì)，你沒(méi)看錯(cuò)，就是仿，堅(jiān)信高仿出奇跡。 前言 點(diǎn)擊訪問(wèn)項(xiàng)目鏈接看到慕課網(wǎng)和segmentfault的發(fā)表手記和發(fā)表文章是Markdown 編輯器，說(shuō)實(shí)話，對(duì)于第一次用的我真的很不習(xí)慣。不過(guò)對(duì)于我們代碼開(kāi)發(fā)者來(lái)寫挺好的，也就對(duì)我們這些開(kāi)發(fā)者述寫自己的代碼故事好點(diǎn)而已。這邊我...
摘要：由于需要的編輯器功能比較簡(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...
摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺(tái) 系列...
摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺(tái) 系列...
閱讀 3205·2021-11-08 13:21
閱讀 1194·2021-08-12 13:28
閱讀 1406·2019-08-30 14:23
閱讀 1924·2019-08-30 11:09
閱讀 840·2019-08-29 13:22
閱讀 2684·2019-08-29 13:12
閱讀 2548·2019-08-26 17:04
閱讀 2250·2019-08-26 13:22
