vue中富文本編輯器的安裝及使用

 應項目需求,需要使用富文本編輯器,故而研究一番
一、如何安裝:
 安裝方式有兩種:
 1)通過可視化項目管理器安裝(推薦)
 2)通過指令在vscode中進行安裝
安裝步驟:(可視化項目管理安裝)
 1.打開cmd,運行vue ui,打開vue可視化項目管理器
 2.選擇依賴,點擊安裝依賴
在這裏插入圖片描述
 3.輸入vue-quill-editor,點擊安裝
在這裏插入圖片描述
 安裝成功後,點擊查看詳情
在這裏插入圖片描述
 打開詳情可看到關於富文本編輯器的使用在這裏插入圖片描述
二、如何使用
 在main.js文件中導入以下代碼,將富文本編輯器設置爲全局可用

//導入富文本編輯器
import VueQuillEditor from 'vue-quill-editor'
//導入富文本編輯器對應的樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
//將富文本編輯器,註冊爲全局可用的組件
Vue.use(VueQuillEditor)

在這裏插入圖片描述
 在需要使用富文本編輯器的地方引入即可使用

<quill-editor></quill-editor>

三、可能遇見的問題
 main.js無法編輯
 如圖:編輯main.js會報紅線
在這裏插入圖片描述
 如何解決:打開設置->搜索:eslint.enable->去掉打鉤,保存即可在這裏插入圖片描述

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