vue專案中富文字 quill editor的使用

2021-10-22 18:55:43 字數 1433 閱讀 6317

1.基本使用步驟：

npm install vue-quill-editor
import


'quill/dist/quill.core.css'


import


'quill/dist/quill.snow.css'


import


'quill/dist/quill.bubble.css'


import


from


'vue-quill-editor'


export


default


}
//content富文字內容  editoroption富文字配置 


"content"


:options=


"editoroption"


/>


newvue(}}})
2.富文字的基本配置：如圖下：

落地**配置：

var *******options =[[


'bold'


,'italic'


,'underline'


,'strike'],


// toggled buttons


['blockquote'


,'code-block'],


[,],


// custom button values[,


],[,


],// superscript/subscript[,


],// outdent/indent


,// text direction


,// custom dropdown


,[,]


,// dropdown with defaults from theme


,,['clean'


]// remove formatting button];


var quill =


newquill


('#editor',,


theme:


'snow'})


;
3.對應的樣式設定：把自己想要的樣式寫在option裡的modules下的*******，就可以生成響應的樣式。

data()


,]，//列表 - list [,


],//上標/下標 - script [,


],//縮排 - indent[,


],//文字方向 - direction


,]}}}},

vue中富文字如何匯入

1.在視覺化面板中，安裝執行依賴搜所vue quill editor 2.在專案中main.js中進行註冊 匯入富文字編輯器 import vuequilleditor from vue quill editor 匯入富文字編輯器的樣式 import quill dist quill.core.cs...

vue中富文字編輯器wang editor的使用

npm安裝哦 wangeditor 3.1.1 在引入元件時 import wangeditor from wangeditor detailtext class wang wang editor 元件富文字編輯器的 html editor class div editor class text d...

vue專案中新增富文字編輯器

官網 1.首先 在專案中開啟終端 輸入npm install vue quill editor 進行安裝 2.分別引入富文字編輯器及其css樣式 import from vue quill editor import quill dist quill.core.css import quill di...