UEditor是由百度web前端研發(fā)部開(kāi)發(fā)所見(jiàn)即所得富文本web編輯器，具有輕量，可定制，注重用戶(hù)體驗(yàn)等特點(diǎn)，開(kāi)源基于MIT協(xié)議，允許自由使用和修改代碼。（抄的...）

UEditor是非常好用的富文本web編輯器，而且全中文API和注釋，方便學(xué)習(xí)和使用。特別是圖片上傳查看及涂鴉功能極為喜歡，但是有很多情況我們并不需要Web編輯器，而只需要圖片上傳。那么問(wèn)題來(lái)了,提取圖片上傳哪家強(qiáng).....

網(wǎng)上有很多圖片上傳的控件、插件。但都不是那么的完美，有的只有一張圖片上傳不包含批量上傳，有的沒(méi)有圖片查看功能，還有的必須要flash的支持（ios系統(tǒng)就悲劇了），當(dāng)然還有的不能跨語(yǔ)言，還有上傳沒(méi)有狀態(tài)顯示，當(dāng)然還有客戶(hù)體驗(yàn)不是太好， 瀏覽器兼兼容問(wèn)題就更多了，在線(xiàn)涂鴉更是少之又少。而UEditor上傳圖片幾乎解決了以上的問(wèn)題。

廢話(huà)不多說(shuō)，走起。

一、從官網(wǎng)（http://ueditor.baidu.com/website/download.html）上下載UEditor選擇開(kāi)發(fā)版[1.4.2 .Net 版本]，1、因?yàn)楸救?Net。2、老的版本更穩(wěn)定，新版本不支持ie8以下版本。關(guān)于其他語(yǔ)言的開(kāi)發(fā)其實(shí)和.Net一樣，主要是思路。

二、按照官網(wǎng)的說(shuō)明文檔（http://fex-team.github.io/ueditor/）把UEditor部署到VS（http://fex-team.github.io/ueditor/#server-net）中，保證UEditor可以正常使用，特別是圖片上傳功能。本文主要講解單獨(dú)提取UEditor圖片上傳功能，所以對(duì)UEditor的使用部署請(qǐng)參考官網(wǎng)（http://ueditor.baidu.com）。圖是本人在VS中的目錄結(jié)構(gòu)。

三、修改config.json相關(guān)配置信息，這個(gè)配置主要關(guān)于上傳以及查看圖片的相關(guān)配置。

四、修改ueditor.config.js中的toolbars以及serverUrl ，我們只顯示多圖片單圖片以及涂鴉的顯示。

?

1 2 3 4 5

// 服務(wù)器統(tǒng)一請(qǐng)求接口路徑 ??????? , serverUrl: URL + "../../Common/controller.ashx" ??????? //工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的實(shí)例時(shí)選擇自己需要的從新定義 ??????? , toolbars: [[ 'insertimage', 'scrawl', 'simpleupload'? ]]

五、我們的主要內(nèi)容是創(chuàng)建自己的通用提取上傳圖片的js文件（custom.js）和簡(jiǎn)單修改UEditor的ueditor.all.js文件。

　　1)、我們?cè)陧?yè)面中添加UEditor顯示Div[editor-img]以及我們后面要處理上傳完以后處理文件的名稱(chēng)[temp-img-list]，還有初始化Ueditor。

?

1 2	$("body").append(" <div id=\"editor-img\" style=\"display:none\"></div><div id=\"temp-img-list\" style=\"display: none\"></div>"); var ue = UE.getEditor('editor-img');

　　2)、我們可以把div id='editor-img'的display='block'顯示，然后我們就可以在頁(yè)面看到完整的包含圖片上傳多圖片上傳以及涂鴉的UEditor了。

　　 3)、我們?cè)陧?yè)面Default.aspx中定義一個(gè)多圖片上傳按鈕a標(biāo)簽，然后調(diào)用uploadImgs()方法，我們要做的就是點(diǎn)擊a標(biāo)簽觸發(fā)UEditor多圖片上傳按鈕，我們查看源碼可以到多圖片上傳按鈕的div class 為edui-for-insertimage，如圖。然后我們點(diǎn)擊a標(biāo)簽就彈出圖片上傳的窗口了。

?

1 2 3

function uploadImgs() { ??? $(".edui-for-insertimage .edui-button-body")[0].click(); }

　

　　　　

　　　　

　　　　我們這時(shí)可以上傳圖片以及在線(xiàn)查看圖片了。然后點(diǎn)擊確認(rèn)。。。。。。我們這時(shí)點(diǎn)擊確認(rèn)會(huì)發(fā)現(xiàn)會(huì)把圖片加載到UEditor中，這并不是我們想要的，我們已經(jīng)完成把圖片上傳到服務(wù)器了，現(xiàn)在只要知道我們上傳了哪些圖片或者查看圖片時(shí)選擇了哪些圖片的名稱(chēng)就完成我們所需要的了。

　　4)、當(dāng)點(diǎn)擊確認(rèn)時(shí)圖片加載到編輯器中，編輯器的內(nèi)容就會(huì)發(fā)生變化。我們可以監(jiān)聽(tīng)編輯器內(nèi)容的變化然后再獲取編輯器中的內(nèi)容進(jìn)行分析處理即可獲取圖片名稱(chēng)。我們查看官方API可以找到contentChange事件(編輯器內(nèi)容發(fā)生改變時(shí)會(huì)觸發(fā)該事件)，然后監(jiān)聽(tīng)此事件。由于單個(gè)圖片上傳相比批量上傳和涂鴉比較復(fù)雜，我們稍后再做詳解。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

UE.getEditor('editor-img').addListener('contentChange', function (editor) { ?????? //獲取編輯器中的內(nèi)容（html 代碼） ?????? var img = UE.getEditor('editor-img').getPlainTxt(); ?????? if (img != "") { ?????????????? //把編輯器中的內(nèi)容放到臨時(shí)div中，然后進(jìn)行獲取文件名稱(chēng)。 ?????????????? $("#temp-img-list").html(img); ?????????????? var array = new Array(); ?????????????? //循環(huán)獲取文件名稱(chēng) ?????????????? $("#temp-img-list img").each(function () { ?????????????????? var src = $(this).attr("src"); ?????????????????? var name = src.replace("/upload/image/", ""); ?????????????????? array.push(name); ?????????????? }); ?????????????? //清空編輯器中的內(nèi)容，以便下一次添加圖片。 ?????????????? UE.getEditor('editor-img').execCommand('cleardoc'); ?????????????? //調(diào)用callbackImg獲取懂圖片名稱(chēng) ?????????????? if (typeof callbackImg === "function") { ?????????????????? eval("callbackImg('" + array + "')"); ?????????????? } ?????????? ?????? } ?? });

　　　5)、我們自定義js方法callbackImg就可以獲取到圖片名稱(chēng)了

?

1 2 3 4 5 6

function callbackImg(imgName) { ??????????? var names = imgName.split(","); ??????????? for (var i = 0; i < names.length; i++) { ??????????????? $("#show-img-name").append($("<div></div>").html($("<a></a>").html(names[i]).attr("href", "/upload/image/" + names[i] + "").attr("target", "_blank"))); ??????????? } ??????? }

　　6)、這樣一個(gè)完整的批量圖片上傳查看的功能就完成了。同理我們可以添加涂鴉的功能，其實(shí)這這一步涂鴉的功能只要一步即可，自定義一個(gè)js方法insertScrawl(),然后調(diào)用insertScrawl即可完成涂鴉的功能。

?

1 2 3

function insertScrawl() { ??? $('.edui-for-scrawl .edui-button-body')[0].click(); }

　　到此為止，我們就完成了批量圖片上傳和涂鴉功能。

六、通讀代碼其實(shí)發(fā)現(xiàn)批量圖片上傳和涂鴉就是簡(jiǎn)單的模擬按鈕調(diào)用，然后上傳完圖片或者選擇完圖片然后點(diǎn)擊確認(rèn)回調(diào)處理編輯器中的內(nèi)容獲取文件名稱(chēng)。但是單獨(dú)上傳圖片會(huì)有一定的復(fù)雜度。

　　1)、我們用UEditor上傳單個(gè)圖片時(shí)會(huì)發(fā)現(xiàn)在編輯器中會(huì)有個(gè)等待的圖片，當(dāng)圖片上傳完畢以后會(huì)把等待圖片換成我們上傳的圖片。

　　

　　上傳中...

　　

　　上傳完成以后。

　　2)、那么問(wèn)題又來(lái)了，問(wèn)題一，我們?cè)瓉?lái)是監(jiān)聽(tīng)編輯器中文本變化，然后獲取其中的圖片提取名稱(chēng)，這時(shí)我們獲取的是等待的圖片而不是我們真正上傳的圖片。問(wèn)題二，這時(shí)上傳并沒(méi)有狀態(tài)顯示，如果圖片過(guò)大或者網(wǎng)速不是很好的情況下，導(dǎo)致用戶(hù)體驗(yàn)不是很好。

　　　　解決這些問(wèn)題我們首先要找到圖片剛開(kāi)始上傳和上傳完畢的事件，還有要判斷編輯器中的圖片是否是等待的圖片，反之就是我們上傳的圖片。

　　　　　　1)、查找源碼我們可以在ueditor.all.js中找到上傳開(kāi)始和上傳完成的事件，分別在24379行和24390行，在ueditor.all.js中分別調(diào)用js方法preUploadSingleImg()和uploadSingleImgCallback()。

　　　　　　2)、ueditor.all.js中修改代碼（1,2,3行，23,24,25行）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<span style="text-decoration: underline;"><em><strong>　</strong></em></span>if (typeof preUploadSingleImg === "function") { ????????? preUploadSingleImg(); ????? } ????? function callback() { ????????? try{ ????????????? var link, json, loader, ????????????????? body = (iframe.contentDocument || iframe.contentWindow.document).body, ????????????????? result = body.innerText || body.textContent || ''; ????????????? json = (new Function("return " + result))(); ????????????? link = me.options.imageUrlPrefix + json.url; ????????????? if(json.state == 'SUCCESS' && json.url) { ????????????????? loader = me.document.getElementById(loadingId); ????????????????? loader.setAttribute('src', link); ????????????????? loader.setAttribute('_src', link); ????????????????? loader.setAttribute('title', json.title || ''); ????????????????? loader.setAttribute('alt', json.original || ''); ????????????????? loader.removeAttribute('id'); ????????????????? domUtils.removeClasses(loader, 'loadingclass'); ????????????? } else { ????????????????? showErrorLoader && showErrorLoader(json.state); ????????????? } ????????????? //單獨(dú)提取上傳回調(diào)函數(shù)。 ????????????? if (typeof uploadSingleImgCallback === 'function') { ????????????????? uploadSingleImgCallback(); ????????????? }

　　　　　3)、在自定義js custom.js中添加方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//單傳圖片開(kāi)始上傳,顯示等待。 function preUploadSingleImg() { ??? if ($("#loading").length > 0) { ??????? $("#loading").html("<img src='/Scripts/ueditor/loading.gif'>");; ??? } } //單傳圖片回調(diào)，隱藏等待圖片 function uploadSingleImgCallback() { ??? if ($("#loading").length > 0) { ??????? $("#loading").empty(); ??? } }

　　　　4)、最后要做的就是在頁(yè)面上添加一個(gè)空的div id='loading'

　　　　 5)、這樣我們就解決了單獨(dú)圖片上傳狀態(tài)的問(wèn)題，但是還有一個(gè)獲取編輯器中上傳圖片的問(wèn)題，這時(shí)要做兩步，

　　　　　　　　1）、在custom.js中修改代碼，編輯器內(nèi)容改變事件中contentChange 判斷是否是等待圖片，如果是等待圖片我們不做任何的處理即可。修改代碼為

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

UE.getEditor('editor-img').addListener('contentChange', function (editor) { ??????? //獲取編輯器中的內(nèi)容（html 代碼） ??????? var img = UE.getEditor('editor-img').getPlainTxt(); ??????? if (img != "") { ??????????? //判斷是否是單圖片上傳，如果是單傳不做任何處理，等待回調(diào)函數(shù)再次調(diào)用。 ??????????? if (img.indexOf("loadingclass") == -1) { ??????????????? //把編輯器中的內(nèi)容放到臨時(shí)div中，然后進(jìn)行獲取文件名稱(chēng)。 ??????????????? $("#temp-img-list").html(img); ??????????????? var array = new Array(); ??????????????? //循環(huán)獲取文件名稱(chēng) ??????????????? $("#temp-img-list img").each(function () { ??????????????????? var src = $(this).attr("src"); ??????????????????? var name = src.replace("/upload/image/", ""); ??????????????????? array.push(name); ??????????????? }); ??????????????? //清空編輯器中的內(nèi)容，以便下一次添加圖片。 ??????????????? UE.getEditor('editor-img').execCommand('cleardoc'); ??????????????? //調(diào)用callbackImg獲取懂圖片名稱(chēng) ??????????????? if (typeof callbackImg === "function") { ??????????????????? eval("callbackImg('" + array + "')"); ??????????????? } ??????????? } ??????? } ??? });

　　　　　　　　2)、我們?cè)谏蟼魍晔录星蹇站庉嬈髦械膬?nèi)容，然后編輯器又會(huì)調(diào)用 contentChange 事件，由于上傳完畢以后編輯器中不是等待的圖片而是我們真正上傳的圖片，這時(shí)只要按照多圖片上傳獲取圖片名稱(chēng)即可。修改方法uploadSingleImgCallback為

?

1 2 3 4 5 6 7

//單傳圖片回調(diào),然后清理內(nèi)容,在清理內(nèi)容會(huì)自動(dòng)調(diào)用contentChange事件，然后再獲取上傳文件的文件名。 function uploadSingleImgCallback() { ??? UE.getEditor('editor-img').execCommand('cleardoc'); ??? if ($("#loading").length > 0) { ??????? $("#loading").empty(); ??? } }

　　　　6)、最后我自定義一個(gè)按鈕調(diào)用方法uploadImg()即可彈出窗口選擇圖片，然后選擇圖片點(diǎn)擊確定即可上傳到服務(wù)器并獲取到文件名稱(chēng)。

?

1 2 3

function uploadImg() { ??? $(".edui-for-simpleupload input").click(); }

　　　　

總結(jié)：我們選擇就從UEditor中提取了多圖片單圖片上傳以及涂鴉的功能。關(guān)于其他語(yǔ)言，邏輯一樣的，只要更換不同的服務(wù)端代碼即可。

以下為動(dòng)畫(huà)演示

轉(zhuǎn)載于:https://www.cnblogs.com/jameslif/p/4045706.html

總結(jié)

以上是生活随笔為你收集整理的从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。