quill富文本插入表格quill-better-table

使用quill-better-table插件，官网GitCode - 全球开发者的开源社区,开源代码托管平台

安装

首先quill-better-table插件，官网有写需要 quills v2.0.0-dev3

我这里使用的是 quills v2.0.0-dev4，自行安装

然后就是安装我们的插件 quill-better-table

npm install quill-better-table

使用

<template>
    <div class="publish-form-container">
        <!-- TODO: 表单内容 -->
        <div ref="quillEditorRef" class="quill-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' 
  import ImageResize from 'quill-image-resize' // 图片位置 以及 改变图片大小
  
  
  
  Quill.register({
      'modules/better-table': QuillBetterTable,
      'modules/imageResize': ImageResize,
  }, true)
  
  export default {
    name: 'PublishForm',
    data() {
      return {
        title: '',
        type: '',
        content: '',
      };
    },
    mounted() {
      this.initQuillEditor();
    },
    methods: {
      initQuillEditor() {
        const self = this;
        this.quillEditor = new Quill(this.$refs.quillEditorRef, {
          modules: {
            toolbar: {
              container:[
                [{ font: ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif'] }],
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ header: 1 }, { header: 2 }],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ script: 'sub' }, { script: 'super' }],
                [{ indent: '-1' }, { indent: '+1' }],
                [{ direction: 'rtl' }],
                [{ size: ['small', false, 'large', 'huge'] }],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [{ color: [] }, { background: [] }],
                [{ align: [] }],
                ['clean'],
                ['link', 'image'],
                ['table'],
              ],
              handlers: {
                    'table': function () {
                        this.quill.getModule('better-table').insertTable(3, 3)
                    },
            },
            },
            table: false,
            'better-table': { // 表格设置
              operationMenu: {
                items: { // 鼠标右键菜单设置,如将某一项设置false则右键菜单不会显示 如            insertColumnRight: false
                  insertColumnRight: { text: '右边插入一列' },
                  insertColumnLeft: { text: '左边插入一列' },
                  insertRowUp: { text: '上边插入一行' },
                  insertRowDown: { text: '下边插入一行' },
                  mergeCells: { text: '合并单元格' },
                  unmergeCells: { text: '拆分单元格' },
                  deleteColumn: { text: '删除列' },
                  deleteRow: { text: '删除行' },
                  deleteTable: { text: '删除表格' }
                },
                background: {
                  color: '#333'
                },
                color: {
                  colors: ['green', 'red', 'yellow', 'blue', 'white'],
                  text: '背景颜色:'
                }
              }
            },
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: ['Resize', 'DisplaySize', 'Toolbar']
            },
            keyboard: {
                bindings: QuillBetterTable.keyboardBindings
            }
  
            
          },
          theme: 'snow',
        });
  
        // 监听编辑器内容的变化
        this.quillEditor.on('text-change', function (delta, oldDelta, source) {
          self.content = self.quillEditor.root.innerHTML;
        });
  
      },
      }
  };
  </script>
  

效果

参考：vue项目 quill 富文本支持表格_quill-better-table-CSDN博客