詳解Vue基于vue-quill-editor富文本編輯器使用心得
vue-quill-editor的guthub地址 ， 現(xiàn)在市面上有很多的富文本編輯器，我個人還是非常推薦Vue自己家的vue-quill-deitor，雖然說只支持IE10 ,但這種問題，帥給別人吧!
那么我們直擊正題 ， 在vue中使用quill呢，我們需要npm進行安裝 ， 安裝命令如下：
再安裝依賴項
使用:
在main.js中進行引入
【詳解Vue基于vue-quill-editor富文本編輯器使用心得】
下面的css一定還要引用，否則編輯器將會沒有css 。
在vue頁面中代碼如下：
其中的v-model就是我們自己的html代碼 ， 你可以將這個html直接放到數(shù)據(jù)庫，這樣也就沒有什么問題了 。如果想要禁用編輯器可以通過以下代碼：
主題設置
在vue項目中，具體引入Quill的文件中，需要使用哪種主題就寫哪個 。默認是snow主題的 。
工具欄設置
圖片推拽上傳
需要安裝 quill-image-drop-module 模塊 ， 那么改一下imageDrop設置為true，你就可以把你電腦上的圖片網(wǎng)上一坨就可以了 。
那上傳文件那你就不用想了，你也許想先把圖片放上去 ， 其實這個文件托上去就已經(jīng)是個base64了，等你在前臺讀數(shù)的時候直接decode就好~
圖片調(diào)整大小ImageResize
相關經(jīng)驗推薦
- 詳解css透明度之rgba和opacity的區(qū)別及兼容
- Java異常處理之try...catch...finally詳解
- JavaScript設計模式之觀察者模式實例詳解
- 詳解VUE單頁應用骨架屏方案
- 附采集規(guī)則 詳解Dedecms 5.5 實現(xiàn)自定義標題處理
- 在vue使用clipboard.js進行一鍵復制文本的實現(xiàn)示例
- 天天P圖文字編輯方法詳解 天天P圖如何添加文字
- 快手動態(tài)壁紙設置操作方法詳解 快手動態(tài)壁紙如何設置
- 淘寶集流星卡瓜分100萬活動方法詳解 淘寶集流星卡清空購物車活動如何參加
- 青桔單車收費標準詳解 青桔單車是否要押金