1.wangEditor —— 輕量級 web 富文本編輯器,配置方便,使用簡單。支持 IE10+ 瀏覽器。
下載wangEditor:npm install wangeditor(英文小寫)
官網:www.wangEditor.com
文檔:www.kancloud.cn/wangfupeng/wangeditor3/332599
源碼:github.com/wangfupeng1988/wangEditor (歡迎 star)
2.頁面中使用了element的upload上傳圖片組件和wangEditor富文本編輯器
(1)添加富文本,id=“editor”
(2)引入wangEditor.js,導入Editor
(3)創建一個富文本編輯器,設置上傳圖片爲Base64形式,隱藏網絡圖片,只上傳本地圖片。this.editor.txt.html();是獲取富文本中的內容
(4)使用element中的upload組件上傳圖片,點擊保存手動上傳
把上傳文件的總數賦給this.i
(5)每成功上傳一張圖片,調用onSuccess函數
後臺返回圖片路徑,push進imgUrl數組,this.m++。當this.m>=this.i,即上傳最後一張圖片時,把其他參數一起發送到後臺。(參數包括文本框內容,圖片路徑–字符串形式,富文本內容–this.editor.txt.html();)