應項目需求,需要使用富文本編輯器,故而研究一番
一、如何安裝:
安裝方式有兩種:
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->去掉打鉤,保存即可