vue中封裝富文字編輯器Quill

2021-10-25 03:29:11 字數 2863 閱讀 1081

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