詳解Vue基于vue-quill-editor富文本編輯器使用心得

vue-quill-editor的guthub地址 , 現在市面上有很多的富文本編輯器,我個人還是非常推薦Vue自己家的vue-quill-deitor,雖然說只支持IE10 ,但這種問題,帥給別人吧!
那么我們直擊正題 , 在vue中使用quill呢,我們需要npm進行安裝 , 安裝命令如下:

詳解Vue基于vue-quill-editor富文本編輯器使用心得

再安裝依賴項
詳解Vue基于vue-quill-editor富文本編輯器使用心得

使用:
在main.js中進行引入
【詳解Vue基于vue-quill-editor富文本編輯器使用心得】
詳解Vue基于vue-quill-editor富文本編輯器使用心得

下面的css一定還要引用,否則編輯器將會沒有css 。
在vue頁面中代碼如下:
詳解Vue基于vue-quill-editor富文本編輯器使用心得

其中的v-model就是我們自己的html代碼 , 你可以將這個html直接放到數據庫,這樣也就沒有什么問題了 。如果想要禁用編輯器可以通過以下代碼:
詳解Vue基于vue-quill-editor富文本編輯器使用心得

主題設置
在vue項目中,具體引入Quill的文件中,需要使用哪種主題就寫哪個 。默認是snow主題的 。
詳解Vue基于vue-quill-editor富文本編輯器使用心得

工具欄設置
詳解Vue基于vue-quill-editor富文本編輯器使用心得

圖片推拽上傳
需要安裝 quill-image-drop-module 模塊 , 那么改一下imageDrop設置為true,你就可以把你電腦上的圖片網上一坨就可以了 。
詳解Vue基于vue-quill-editor富文本編輯器使用心得

那上傳文件那你就不用想了,你也許想先把圖片放上去 , 其實這個文件托上去就已經是個base64了,等你在前臺讀數的時候直接decode就好~
詳解Vue基于vue-quill-editor富文本編輯器使用心得

圖片調整大小ImageResize
詳解Vue基于vue-quill-editor富文本編輯器使用心得



相關經驗推薦