quill,樣式不用多說,也是主流的黑白清新風,美觀,功能上雖然不是很多,甚至還沒有**,網路上傳(可以通過複製網路並黏貼解決)等功能,但它的**高亮是最完美的,同樣支援行內編輯模式,可自定義,總的來說,這是一款優點多但缺點同樣明顯的編輯器,以前用過ueditor,區別大概就是ueditor需要在config檔案配置引數,比如上傳路徑之類,quill不需要,另外就是有個vue-quill-editor包,配合vue使用比較簡單吧,所以我比較喜愛這款。
npm install [email protected]
.6
新建乙個quill.js檔案,如下
複製下面的**到quill.js
import quill from
'quill'
import
'quill/dist/quill.core.css'
import
'quill/dist/quill.snow.css'
import
'quill/dist/quill.bubble.css'
export
default},
data()
,],// [, ],
// [, ],
// ,
,,[,],
// ,
,['clean'],
['link'
,'image']]
},placeholder:
'書寫你的內容'
, readonly:
false}}
},watch:}}
, immediate:
true}}
,mounted()
, methods:)}
)// 將一些 quill 自帶的事件傳遞出去
this
.quill.on(
'text-change'
,(delta, olddelta, source)
=>
)this
.quill.on(
'selection-change'
,(range, oldrange, source)
=>
)this
.quill.on(
'editor-change'
,(eventname,
...args)
=>)}
},render()
}
1.在src路徑下新建乙個plugins檔案
2.新建乙個名為globalcomponents.js檔案,插入以下**
import xgjempty from
'@/components/empty/xgj-empty'
import quill from
'@/components/quill/quill'
function
plugin
(vue)
vue.
component
('xgjempty'
, xgjempty)
vue.
component
('quill'
, quill)
}export
default plugin
3.在main.js檔案引入globalcomponents.js
vue的富文字編輯器
在 vue 專案中引入 tinymce 富文字編輯器 專案中原本使用的富文字編輯器是 wangeditor,這是乙個很輕量 簡潔編輯器 bootstrap wysiwyg 微型,易用,小而美,只是 bootstrap jquery kindeditor 功能強大,簡潔,需要配置後台,而且好久沒見更新...
vue 使用 富文字編輯器
1安裝依賴 npm i quill s npm i vue quill editor s 2.上 元件 如下 template edit container 編輯器 content ref myquilleditor options editoroption blur oneditorblur ev...
vue獲取編輯器純文字 vue富文字編輯器
工具欄配置 const options bold italic underline strike 加粗 斜體 下劃線 刪除線 blockquote code block 引用 塊 1 2 級標題 有序 無序列表 上標 下標 縮排 文字方向 字型大小 標題 字型顏色 字型背景顏色 字型種類 對齊方式 ...