vue中使用富文本编辑器Quill

下载Quill

npm install quill

封装组件

<template>
  <div>
    <div class="editor"></div>
  </div>
</template>
<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import QuillBetterTable from 'quill-better-table'// 引用table
import 'quill-better-table/dist/quill-better-table.css'

Quill.register({
  'modules/better-table': QuillBetterTable
}, true)



export default {
  name: 'DsEditor',
  props: ['value'],
  data () {
    return {
      quill: null,
      options: {
        theme: 'snow',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote'],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              [{ 'indent': '-1' }, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': []}],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'font': []}],
              [{ 'align': [] }],
              ['clean'],
              ['link'],
              ['sourceEditor'] //新增功能（自定义）
            ],
            handlers: {
              sourceEditor: () => { //自定义事件
                let tableModule = this.quill.getModule('better-table')
                tableModule.getTable()
                tableModule.insertTable(3, 3)
              }
            }
          },
          // table: true,
          //在工具栏增加表格插入、删除功能,插件（quill-better-table）
          table: false,
          'better-table': { 
            operationMenu: { // 右击菜单名称修改
              items: {
                insertColumnRight: {
                  text: '右侧插入一列'
                },
                insertColumnLeft: {
                  text: '左侧插入一列'
                },
                insertRowUp: {
                  text: '上侧插入一行'
                },
                insertRowDown: {
                  text: '下侧插入一行'
                },
                mergeCells: {
                  text: '合并单元格'
                },
                unmergeCells: {
                  text: '拆分单元格'
                },
                deleteColumn: {
                  text: '删除当前列'
                },
                deleteRow: {
                  text: '删除当前行'
                },
                deleteTable: {
                  text: '删除表格'
                }
              },
              color: { // 颜色
                colors: ['green', 'red', 'yellow', 'blue', 'white'],
                text: 'Background Colors:'
              }
            }
          },
          keyboard: {
            bindings: QuillBetterTable.keyboardBindings
          }
        },
        placeholder: '点击输入 ...'
      }
    }
  },
  watch: {
    value (n) {
      this.quill.root.innerHTML = n
    }
  },
  mounted () {
    let dom = this.$el.querySelector('.editor')
    this.quill = new Quill(dom, this.options)
    this.quill.root.innerHTML = this.value
    // 输入返回内容
    this.quill.on('text-change', () => {
      this.$emit('getQuill', this.quill.root.innerHTML)
    })
    // 新增功能的元素内容
    const sourceEditorButton = document.querySelector('.ql-sourceEditor')
    sourceEditorButton.innerHTML = '<svg t="1584171359820" class="icon" width="16" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2700" width="200" height="200"><path d="M912.1 250.5v523.2c0 21.1-7.6 39.2-22.6 54.3-15.1 15.1-33.2 22.6-54.3 22.6H189c-21.1 0-39.2-7.5-54.3-22.6s-22.6-33.2-22.6-54.3V250.5c0-21.1 7.5-39.2 22.6-54.3 15.1-15.1 33.2-22.6 54.3-22.6h646.3c21.1 0 39.2 7.6 54.3 22.6 14.9 14.9 22.5 33 22.5 54.3z m-554 153.7v-92.3c0-4.5-1.4-8.2-4.3-11-2.9-2.9-6.6-4.3-11-4.3H188.9c-4.5 0-8.2 1.4-11 4.3-2.9 2.9-4.3 6.6-4.3 11v92.3c0 4.5 1.4 8.2 4.3 11 2.9 2.9 6.6 4.3 11 4.3h153.9c4.5 0 8.2-1.4 11-4.3 2.9-2.8 4.3-6.5 4.3-11z m0 184.8v-92.3c0-4.5-1.4-8.2-4.3-11-2.9-2.9-6.6-4.3-11-4.3H188.9c-4.5 0-8.2 1.4-11 4.3-2.9 2.9-4.3 6.6-4.3 11V589c0 4.5 1.4 8.2 4.3 11 2.9 2.9 6.6 4.3 11 4.3h153.9c4.5 0 8.2-1.4 11-4.3 2.9-2.8 4.3-6.6 4.3-11z m0 184.6v-92.3c0-4.5-1.4-8.2-4.3-11-2.9-2.9-6.6-4.3-11-4.3H188.9c-4.5 0-8.2 1.4-11 4.3-2.9 2.9-4.3 6.6-4.3 11v92.3c0 4.5 1.4 8.2 4.3 11 2.9 2.9 6.6 4.3 11 4.3h153.9c4.5 0 8.2-1.4 11-4.3 2.9-2.9 4.3-6.5 4.3-11z m246.2-369.4v-92.3c0-4.5-1.4-8.2-4.3-11-2.9-2.9-6.6-4.3-11-4.3H435c-4.5 0-8.2 1.4-11 4.3-2.9 2.9-4.3 6.6-4.3 11v92.3c0 4.5 1.4 8.2 4.3 11 2.9 2.9 6.6 4.3 11 4.3h154c4.5 0 8.2-1.4 11-4.3 2.9-2.8 4.3-6.5 4.3-11z m0 184.8v-92.3c0-4.5-1.4-8.2-4.3-11-2.9-2.9-6.6-4.3-11-4.3H435c-4.5 0-8.2 1.4-11 4.3-2.9 2.9-4.3 6.6-4.3 11V589c0 4.5 1.4 8.2 4.3 11 2.9 2.9 6.6 4.3 11 4.3h154c4.5 0 8.2-1.4 11-4.3 2.9-2.8 4.3-6.6 4.3-11z m0 184.6v-92.3c0-4.5-1.4-8.2-4.3-11-2.9-2.9-6.6-4.3-11-4.3H435c-4.5 0-8.2 1.4-11 4.3-2.9 2.9-4.3 6.6-4.3 11v92.3c0 4.5 1.4 8.2 4.3 11 2.9 2.9 6.6 4.3 11 4.3h154c4.5 0 8.2-1.4 11-4.3 2.9-2.9 4.3-6.5 4.3-11z m246.2-369.4v-92.3c0-4.5-1.4-8.2-4.3-11-2.9-2.9-6.6-4.3-11-4.3H681.3c-4.5 0-8.2 1.4-11 4.3-2.9 2.9-4.3 6.6-4.3 11v92.3c0 4.5 1.4 8.2 4.3 11 2.9 2.9 6.6 4.3 11 4.3h153.9c4.5 0 8.2-1.4 11-4.3 2.9-2.8 4.3-6.5 4.3-11z m0 184.8v-92.3c0-4.5-1.4-8.2-4.3-11-2.9-2.9-6.6-4.3-11-4.3H681.3c-4.5 0-8.2 1.4-11 4.3-2.9 2.9-4.3 6.6-4.3 11V589c0 4.5 1.4 8.2 4.3 11 2.9 2.8 6.6 4.3 11 4.3h153.9c4.5 0 8.2-1.4 11-4.3s4.3-6.6 4.3-11z m0 184.6v-92.3c0-4.5-1.4-8.2-4.3-11-2.9-2.9-6.6-4.3-11-4.3H681.3c-4.5 0-8.2 1.4-11 4.3-2.9 2.9-4.3 6.6-4.3 11v92.3c0 4.5 1.4 8.2 4.3 11 2.9 2.9 6.6 4.3 11 4.3h153.9c4.5 0 8.2-1.4 11-4.3 2.9-2.9 4.3-6.5 4.3-11z" p-id="2701"></path></svg>'
  }
}
</script>
<style lang="stylus">
.editor{
  min-height 50vh
}
.qlbt-col-tool{
  display:none;
}


.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: '等宽字体';
}
#disabledMsg.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
  color: #bfd9d8;
  background-color: #eef6f6;
  border-color: #d1e5e5;
}
.ql-snow .ql-tooltip[data-mode=link]::before{
  content: '输入链接';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after{
  content:'保存';
}
</style>

修改工具栏的字体

var fonts = ['Microsoft-YaHei', 'SimSun', 'SimHei', 'KaiTi', 'Arial', 'Times-New-Roman']
var Font = Quill.import('attributors/class/font')
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)

tabbar配置中修改
[{ 'font': fonts }],

css中修改对应的中文名称

.ql-editor .ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}
.ql-editor .ql-font-SimSun {
  font-family: "SimSun";
}
.ql-editor .ql-font-SimHei {
  font-family: "SimHei";
}
.ql-editor .ql-font-KaiTi {
  font-family: "KaiTi";
}
.ql-editor .ql-font-Arial {
  font-family: "Arial";
}
.ql-editor .Times-New-Roman {
  font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '微软雅黑';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
 content: "微软雅黑";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
 content: "黑体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
 content: "楷体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
 content: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
 content: "Times New Roman";
}

修改字体大小选项

var sizes = ['8px', '10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '32px', '48px']

var SizeStyle = Quill.import('attributors/style/size')
SizeStyle.whitelist = sizes
Quill.register(SizeStyle, true)

tabbar配置中
[{ 'size': sizes }],

选项中名称修改，css对应修改

.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
  content: '8px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: '22px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: '26px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: '32px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
  content: '48px';
}
.ql-editor .ql-size-8px {
    font-size: 8px;
}
.ql-editor .ql-size-10px {
    font-size: 10px;
}
.ql-editor .ql-size-12px {
    font-size: 12px;
}
.ql-editor .ql-size-14px {
    font-size: 14px;
}
.ql-editor .ql-size-16px {
    font-size: 16px;
}
.ql-editor .ql-size-18px {
    font-size: 18px;
}
.ql-editor .ql-size-20px {
    font-size: 20px;
}
.ql-editor .ql-size-22px {
    font-size: 22px;
}
.ql-editor .ql-size-24px {
    font-size: 24px;
}
.ql-editor .ql-size-26px {
    font-size: 26px;
}
.ql-editor .ql-size-32px {
    font-size: 32px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
    font-size: 48px;
}
.ql-editor .ql-size-48px {
    font-size: 48px;
}

获取Quill中的内容

获取html

this.quill.root.innerHTML

**赋值**
this.quill.root.innerHTML="<p></p>"

默认返回格式是数组

this.quill.getContents()
**赋值**
this.quill.setContents(this.value)

在有需要的页面使用该组件

<ds-editor @getQuill="getQuill"></ds-editor>
methods:{
getQuill (v) {
      console.log(v.ops)
    },
}

如何在工具栏中新增功能，事件

toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote'],
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              [{ 'script': 'sub' }, { 'script': 'super' }],
              [{ 'indent': '-1' }, { 'indent': '+1' }],
              [{ 'direction': 'rtl' }],
              [{ 'size': []}],
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'font': []}],
              [{ 'align': [] }],
              ['clean'],
              ['link'],
              ['sourceEditor'] //新增功能（自定义）
            ],
            handlers: {
              sourceEditor: () => { //自定义事件
                let tableModule = this.quill.getModule('better-table')
                tableModule.getTable()
                tableModule.insertTable(3, 3)
              }
            }
          },