- 首先下载vue-quill-editor cnpm install vue-quill-editor --save
- 新建公共组件quillEditor.vue,在quillEditor.vue中的html代码如下:
< template>< quill-editor v-model="content" ref= "myTextEditor" :options="editorOption"@change="onChange" placeholder= "111">< div id= "toolbar" slot= "toolbar">< span class= "ql-formats">< button type= "button" class= "ql-bold"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-italic"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-underline"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-strike"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-blockquote"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-code-block"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-header" value= "1"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-header" value= "2"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-list" value= "ordered"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-list" value= "bullet"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-script" value= "sub"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-script" value= "super"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-indent" value= "-1"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-indent" value= "+1"></ button></ span>< span class= "ql-formats">< button type= "button" class= "ql-direction" value= "rtl"></ button></ span>< span class= "ql-formats">< select class= "ql-size">< option value= "small">10px</ option>< option selected>14px</ option>< option value= "large">18px</ option>< option value= "huge">32px</ option>
vue富文本插件vue-quill-editor的使用
最新推荐文章于 2024-12-29 20:10:02 发布
