富文字編輯器vue quill editor的應用

2021-10-09 22:02:51 字數 922 閱讀 1397

步驟：

安裝:

npm i vue-quill-editor
在應用元件中引入3個css檔案:

import


'quill/dist/quill.core.css'


import


'quill/dist/quill.snow.css'


import


'quill/dist/quill.bubble.css'
在應用元件中引入quilleditor模組:

// 通過es6按需匯入方式，匯入需要的元件模組


import


from


'vue-quill-editor'
在應用元件中註冊quilleditor模組為具體的元件:

components:


,
應用編輯器元件:

v-model

="addform.content"

>

quilleditor

>

v-model

="addform.content"

>

quill-editor

>

給編輯器區域設定高度:

注意：

deep是深度作用選擇器的體現(還可以使用 >>>)。

在元件結尾處重新建立乙個沒有scoped屬性的style，設定編輯器高度樣式。

效果：

富文字編輯器

關於使用富文字編輯器的一些小坑 官網 1.專案 片 editor fail function xhr,editor,result custominsert function insertimg,result,editor this.editor.create this.editor.txt.html...

富文字編輯器

富文字編輯器，rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditorallowfilemanager 是否允許瀏覽伺服器已上傳...

富文字編輯器

富文字編輯器，rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditor allowfilemanager 是否允許瀏覽伺服器已上...