vue中封裝富文字編輯器Quill

quill，樣式不用多說，也是主流的黑白清新風，美觀，功能上雖然不是很多，甚至還沒有**，網路上傳（可以通過複製網路並黏貼解決）等功能，但它的**高亮是最完美的，同樣支援行內編輯模式，可自定義，總的來說，這是一款優點多但缺點同樣明顯的編輯器，以前用過ueditor，區別大概就是ueditor需要在config檔案配置引數，比如上傳路徑之類，quill不需要，另外就是有個vue-quill-editor包，配合vue使用比較簡單吧，所以我比較喜愛這款。

npm install [email protected]

.6

複製下面的**到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()
}

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

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 級標題 有序 無序列表 上標 下標 縮排 文字方向 字型大小 標題 字型顏色 字型背景顏色 字型種類 對齊方式 ...