标签：insert 文本编辑 vue dom table 2.0 quill row

先看结果：

必要条件：

1.需要quill版本为2.0的开发版（发布正式版只有1.0的）

        使用npm view quill查看版本，最新的dev版本为dev.4，官方文档好像是说按得dev.3

        

        我直接按的dev.4：npm install quill@2.0.0-dev.4 --save

        

2.准备图标

        参考文章：quill-editor 2.0 集成 vue - 简书

        默认的只有一个图标（插入表格的），增加行、列的需要自己弄一下。以下是图标代码。后面整体代码有使用。

const ICON_SVGS = {
    'table-insert-row': `<svg viewbox="0 0 18 18">
      <g class="ql-fill ql-stroke ql-thin ql-transparent">
        <rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="2.5"></rect>
        <rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="12.5"></rect>
      </g>
      <rect class="ql-fill ql-stroke ql-thin" height="3" rx="0.5" ry="0.5" width="7" x="8.5" y="7.5"></rect>
      <polygon class="ql-fill ql-stroke ql-thin" points="4.5 11 2.5 9 4.5 7 4.5 11"></polygon>
      <line class="ql-stroke" x1="6" x2="4" y1="9" y2="9"></line>
    </svg>`,
    'table-insert-column': `<svg viewbox="0 0 18 18">
      <g class="ql-fill ql-transparent">
        <rect height="10" rx="1" ry="1" width="4" x="12" y="2"></rect>
        <rect height="10" rx="1" ry="1" width="4" x="2" y="2"></rect>
      </g>
      <path class="ql-fill" d="M11.354,4.146l-2-2a0.5,0.5,0,0,0-.707,0l-2,2A0.5,0.5,0,0,0,7,5H8V6a1,1,0,0,0,2,0V5h1A0.5,0.5,0,0,0,11.354,4.146Z"></path>
      <rect class="ql-fill" height="8" rx="1" ry="1" width="4" x="7" y="8"></rect>
    </svg>`,
    'table-delete-row': `<svg viewbox="0 0 18 18">
      <g class="ql-fill ql-stroke ql-thin ql-transparent">
        <rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="2.5"></rect>
        <rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="12.5"></rect>
      </g>
      <rect class="ql-fill ql-stroke ql-thin" height="3" rx="0.5" ry="0.5" width="7" x="8.5" y="7.5"></rect>
      <line class="ql-stroke ql-thin" x1="6.5" x2="3.5" y1="7.5" y2="10.5"></line>
      <line class="ql-stroke ql-thin" x1="3.5" x2="6.5" y1="7.5" y2="10.5"></line>
    </svg>`,
    'table-delete-column': `<svg viewbox="0 0 18 18">
      <g class="ql-fill ql-transparent">
        <rect height="10" rx="1" ry="1" width="4" x="2" y="6"></rect>
        <rect height="10" rx="1" ry="1" width="4" x="12" y="6"></rect>
      </g>
      <rect class="ql-fill" height="8" rx="1" ry="1" width="4" x="7" y="2"></rect>
      <path class="ql-fill" d="M9.707,13l1.146-1.146a0.5,0.5,0,0,0-.707-0.707L9,12.293,7.854,11.146a0.5,0.5,0,0,0-.707.707L8.293,13,7.146,14.146a0.5,0.5,0,1,0,.707.707L9,13.707l1.146,1.146a0.5,0.5,0,0,0,.707-0.707Z"></path>
    </svg>`
  }

初步接触疑惑之处：

        看了官方文档和其他博客文章后，蒙了，导致版本和扩展插件理解错了。其实quill@1.0的版本不支持表格。我以为升级到2.0后+quill-better-table扩展插件，就可以了。发现增加列、行不行，查看源代码，发现没有相应的方法。最后发现，根本不用扩展插件。quill@2.0的dev版本已经有了（不清楚是dev.4比dev.3增加了，还是怎么回事）。

        升级了2.0-dev.4，直接就有以上功能了（见代码）

html部分：

<div class="myQuillEditor" v-loading="quillUpdateImg">
  <el-upload
     class="avatar-uploader"
     :action="serverUrl"
     name="img"
     :headers="header"
     :show-file-list="false"
     :on-success="uploadSuccess"
     :on-error="uploadError"
     :before-upload="beforeUpload"
     style="display:none">
   </el-upload>
   <quill-editor id="myQuillEditor" v-model="emergPlanData.disStep" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
   </quill-editor>
</div>

js部分：

import Quill from 'quill'
import _ from 'lodash'

const ICON_SVGS = {
    ....这里就不写了，复制上面的代码吧。
}
// 工具栏我做删减，table那部分是表格需要用的
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    //['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }], // custom button values
    // [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    //[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
    //[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
    //[{ 'direction': 'rtl' }], // text direction

    // [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
    //[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    //[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
    // [{ 'font': [] }],
    // [{ 'align': [] }],
    //---开始
    [
      {'table': 'TD'},
      {'table-insert-row': 'TIR'},
      {'table-insert-column': 'TIC'},
      {'table-delete-row': 'TDR'},
      {'table-delete-column': 'TDC'}
    ],
    //---结束
    ['image'],
    ['clean'] // remove formatting button
  ]
export default {
  data() {
    return {
       editorOption: {
          placeholder: '',
          theme: 'snow', // or 'bubble'
          modules: {
            table: true, // 设为true
            toolbar: {
              container: toolbarOptions, // 工具栏
              handlers: {
                // 增加表格的5个触发方法
                'table': function (val) {
                    console.log('table====',this.quill.getModule('table'))
                    this.quill.getModule('table').insertTable(2, 3)
                },
                'table-insert-row': function () {
                    this.quill.getModule('table').insertRowBelow()
                },
                'table-insert-column': function () {
                    this.quill.getModule('table').insertColumnRight()
                },
                'table-delete-row': function () {
                    this.quill.getModule('table').deleteRow()
                },
                'table-delete-column': function () {
                    this.quill.getModule('table').deleteColumn()
                }
              }
            },
            // 下面是图片的扩展插件（图片支持调整大小）不需要可删掉
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white',
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            },
            // imageDrop: true
          }
        }, // 富文本编辑器配置
    }
  },
  mounted(){
    this._initCustomToolbarIcon()
    // 如果你的富文本是在页面中，写在mounted中即可，但我的是在弹窗，所以挪到了下面弹窗事件里
    // let dom = this.$refs.myQuillEditor.$el
    // this.quill = new Quill(dom, this.editorOption);
  },
   methods: {
      _initCustomToolbarIcon () {
        // 获取quill的原生图标库
        let icons = Quill.import('ui/icons')

        // 从自定义图标SVG列表中找到对应的图标填入到原生图标库中
        _.forEach(ICON_SVGS, (iconValue, iconName) => {
          icons[iconName] = iconValue
        })
      },
      // 我的需求是在弹窗里实现的富文本编辑，因此下面代码放在了弹窗的事件里
      showDialog(){
       this.$nextTick(() => {
        setTimeout(() => {
          // let content = document.getElementById('myQuillEditor');
          let dom = this.$refs.myQuillEditor.$el
          this.quill = new Quill(dom, this.editorOption);
        })
      })
     }
   },
}

这样就完成了

遇到的问题：

在获取弹窗的编辑器dom时，获取不到。

看到的文章是这么写的：let dom = this.$el.querySelector(".myQuillEditor"）打印$el，没有弹窗的元素。后来用et content = document.getElementById('myQuillEditor');测了下可以。

然后就使用了ref来获取

          let dom = this.$refs.myQuillEditor.$el

          this.quill = new Quill(dom, this.editorOption);

看了半天资料，哎，咋写的都有。

推荐这个：（他也是跳到了其他文章，帮我解决了改问题）vue-quill-editor+vue-better-table结合使用,实现表格插入/合并等问题; - 夏小夏吖 - 博客园

标签：insert,文本编辑,vue,dom,table,2.0,quill,row
来源： https://blog.csdn.net/qq_20984609/article/details/121180540

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。