php用wangeditor3實(shí)現(xiàn)圖片上傳功能
就在最近,公司讓我寫(xiě)一個(gè)后臺(tái),其中用到了富文本編輯器。自從這個(gè)富文本的出現(xiàn) 我就慢慢的進(jìn)入了一個(gè)坑,起初不知道用什么編輯器好,看了好多好多,最后選擇了。這個(gè) wangeditor3。個(gè)人認(rèn)為這個(gè)富文本很干凈,還很多功能。
選擇了編輯器 我就慢慢的走進(jìn)了坑的道理,一步一個(gè)坎。接下來(lái)就是看代碼了。
這個(gè)是wangeditor,選擇一個(gè)自己喜歡的版本。我用的是3的
https://github.com/wangfupeng1988/wangEditor/releases

定義一個(gè)富文本編輯器

然后富文本就出現(xiàn)了

然后就是圖片上傳代碼 首先要在js中配置點(diǎn)東西。
<script>
var E = window.wangEditor;
var editor = new E(‘#elm1‘);
editor.customConfig.uploadImgServer = "uploads.php"; // 上傳圖片到服務(wù)器
editor.customConfig.uploadFileName = "file"; //文件名稱(chēng) 也就是你在后臺(tái)接受的 參數(shù)值
editor.customConfig.uploadImgHeaders = { //header頭信息
‘Accept‘: ‘text/x-json‘
}
// 將圖片大小限制為 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 //默認(rèn)為5M
editor.customConfig.uploadImgShowBase64 = false; // 使用 base64 保存圖片
// editor.customConfig.customAlert = function (info) { //自己設(shè)置alert錯(cuò)誤信息
// // info 是需要提示的內(nèi)容
// alert(‘自定義提示:‘ + ‘圖片上傳失敗,請(qǐng)重新上傳‘)
// };
editor.customConfig.debug = true; //是否開(kāi)啟Debug 默認(rèn)為false 建議開(kāi)啟 可以看到錯(cuò)誤
// editor.customConfig.debug = location.href.indexOf(‘wangeditor_debug_mode=1‘) > 0; // 同上 二選一
//圖片在編輯器中回顯
editor.customConfig.uploadImgHooks = {
error: function (xhr, editor) {
alert("2:" + xhr + "請(qǐng)查看你的json格式是否正確,圖片并沒(méi)有上傳");
// 圖片上傳出錯(cuò)時(shí)觸發(fā) 如果是這塊報(bào)錯(cuò) 就說(shuō)明文件沒(méi)有上傳上去,直接看自己的json信息。是否正確
// xhr 是 XMLHttpRequst 對(duì)象,editor 是編輯器對(duì)象
},
fail: function (xhr, editor, result) {
// 如果在這出現(xiàn)的錯(cuò)誤 就說(shuō)明圖片上傳成功了 但是沒(méi)有回顯在編輯器中,我在這做的是在原有的json 中添加了
// 一個(gè)url的key(參數(shù))這個(gè)參數(shù)在 customInsert也用到
//
alert("1:" + xhr + "請(qǐng)查看你的json格式是否正確,圖片上傳了,但是并沒(méi)有回顯");
},
success:function(xhr, editor, result){
//成功 不需要alert 當(dāng)然你可以使用console.log 查看自己的成功json情況
//console.log(result)
// insertImg(‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png‘)
},
customInsert: function (insertImg, result, editor) {
//console.log(result);
// 圖片上傳并返回結(jié)果,自定義插入圖片的事件(而不是編輯器自動(dòng)插入圖片?。。。?
// insertImg 是插入圖片的函數(shù),editor 是編輯器對(duì)象,result 是服務(wù)器端返回的結(jié)果
// 舉例:假如上傳圖片成功后,服務(wù)器端返回的是 {url:‘....‘} 這種格式,即可這樣插入圖片:
insertImg(result.url);
}
};
editor.customConfig.showLinkImg = true; //是否開(kāi)啟網(wǎng)絡(luò)圖片,默認(rèn)開(kāi)啟的。
editor.create()
</script>
這些是javascript的配置代碼。
詳細(xì)的php代碼在我的git里面 有興趣的可以下載一下~
https://github.com/wjmGG/wangeditor3UploadForPHP.git
這樣wangeditor3的圖片上傳就完成了。
以上就是本次介紹的全部知識(shí)點(diǎn)內(nèi)容,感謝大家對(duì)腳本之家的支持。
相關(guān)文章
PHP設(shè)計(jì)模式之委托模式定義與用法簡(jiǎn)單示例
這篇文章主要介紹了PHP設(shè)計(jì)模式之委托模式定義與用法,簡(jiǎn)單描述了委托模式的功能、定義與簡(jiǎn)單使用方法,需要的朋友可以參考下2018-08-08
php中將時(shí)間差轉(zhuǎn)換為字符串提示的實(shí)現(xiàn)代碼
通過(guò)傳入數(shù)據(jù)庫(kù)中存儲(chǔ)的文章發(fā)表時(shí)的UNIX時(shí)間戳,來(lái)轉(zhuǎn)化為例如 幾分鐘前,幾小時(shí)前,幾天前 這樣的提示。2011-08-08
解析thinkphp import 文件內(nèi)容變量失效的問(wèn)題
本篇文章是對(duì)thinkphp import文件內(nèi)容變量失效的問(wèn)題進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06
PHP PDO和消息隊(duì)列的個(gè)人理解與應(yīng)用實(shí)例分析
這篇文章主要介紹了PHP PDO和消息隊(duì)列的個(gè)人理解與應(yīng)用,結(jié)合實(shí)例形式分析了PHP pdo與消息隊(duì)列相關(guān)配置、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
ubuntu 編譯安裝php 5.3.3+memcache的方法
ubuntu 編譯安裝php 5.3.3+memcache的方法,需要的朋友可以參考下。2010-08-08

