vue富文本编辑器插件vue-quill-editor使用

简介

版本:"vue-quill-editor": "^3.0.6"

vue-quill-editor 使用文档：前言 · Quill官方中文文档 · 看云 (kancloud.cn)

安装

npm  install vue-quill-editor@3.0.6  -s

配置富文本模块

使用说明

为模块注入value(富文本内容(html))、contentData(修改后触发的方法，这里修改父级变量)

模块toolbar属性可以调整工具栏显示工具详情请查文档

class="ql-editor"属性如果没有编辑器会过滤制表符和联系空格

修改css汉化显示

• 修改后的css：https://wwa.lanzous.com/iUxY3ox304j  下载后改名为quill.snow.css，替换node_modules\quill\dist\quill.snow.css
• 使用模块设置样式

配置界面使用示例

template部分

 <editor
                :value="announcementFormData.content"
                @contentData="contentChange($event)"
              >

data

 announcementFormData: {
        content: '',
      },

methods

    contentChange(event) {
      this.announcementFormData.content = event
    },

展示富文本html

相关html、css：https://wwa.lanzous.com/iqcexozpx3a

使用方式打开html传递url参数键为quillDom值为配置界面生成的html字符串(字符串需要使用encodeURIComponent方法处理)

效果图