vue中引入wangEditor富文本編輯器

1.wangEditor —— 輕量級 web 富文本編輯器,配置方便,使用簡單。支持 IE10+ 瀏覽器。
下載wangEditor:npm install wangeditor(英文小寫)

官網:www.wangEditor.com
文檔:www.kancloud.cn/wangfupeng/wangeditor3/332599
源碼:github.com/wangfupeng1988/wangEditor (歡迎 star)

2.vue中使用wangEditor富文本編輯器
(1)添加富文本,id=“editor”

在這裏插入圖片描述

(2)引入wangEditor.js,導入Editor

在這裏插入圖片描述

(3)創建一個富文本編輯器,設置上傳圖片爲Base64形式,隱藏網絡圖片,只上傳本地圖片。this.editor.txt.html();是獲取富文本中的內容(id=“editor”–"#editor")

在這裏插入圖片描述

(4)點擊保存,把用戶userId和富文本內容發送到後臺

在這裏插入圖片描述

(5)編輯器效果圖如下:

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章