quill编辑器使用总结

一、vue-quill-editor 与 quill

若使用版本1.0，这两个组件使用哪个都是一样的，无非代码有点偏差；若需要使用表格功能，必须使用 quill2.0 版本，因为 vue-quill-editor 不支持table功能。

二、webpack版本问题

在使用 quill-image-resize-module 组件做图片缩放功能时，需要全局引入quill，及在 vue.config.js 文件中进行如下配置：

const webpack = require('webpack');
// configureWebpack下添加
plugins: [
    new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
    })
]

但配置完发现项目还是报错，这里需要将 webpack5.0版本更换为 webpack4.0

三、图片文字复制粘贴功能

配合 quill-image-extend-module 组件实现图片上传到服务器的功能，具体参考：https://www.kancloud.cn/liuwave/quill/1434141

编辑器内粘贴文字基本没啥问题，好多人都困在了粘贴图片需要上传至文件服务器的问题上，最简单的方法就是添加一个粘贴事件，示例如下：

<div class="editor" ref="editor" @paste="imgPasteHandler($event)"></div>

// 监听粘贴事件
    imgPasteHandler(e) {
      if (e.clipboardData && e.clipboardData.files && e.clipboardData.files.length) {
        e.preventDefault();
        [].forEach.call(e.clipboardData.files, file => {
          let fileName = file.name;
          let fileType = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);
          console.log('fileType',fileType);
          let formData = new FormData();
          formData.append("files", file);
          uploadPic(formData).then(resp => {
            if (resp.code === '200') {
              this.$message.success("图片上传成功");
              let index = this.quill.getSelection(true).index;
              this.quill.insertEmbed(index, 'image', process.env.VUE_APP_BASE_API + resp.data.url);
              this.quill.setSelection(index + 1);
            } else {
              this.$message.error(resp.msg);
            }
          });
        });
      }
    }

四、实现表格功能

quill2.0版本是支持 quill-better-table 的。table可以实现单元格的宽度缩放，合并，新增，删除，以及底色调整。

详情请参考：https://www.cnblogs.com/utomboy/p/17839224.html

五、动态实现编辑器的可编辑与只读模式

可以在quill组件中定义一个属性，然后监听这个属性进行实时的对编辑器的只读模式进行更改，参考如下：

props: {
    /* 是否只读 */
    isReadOnly: {
      type: Boolean,
      default: false
    }
},
watch: {
    isReadOnly: {
      handler(flag) {
        if (this.quill !== null) {
          this.quill.enable(!flag);
        }
      },
      immediate: true
    }
  }

六、给toobar增加title

编辑器默认是没有title提示的，这对于使用者来说很不友好，可以对toobar的工具图标添加title中文提示，示例如下：

data() {
    return {
        titleConfig: {
        'ql-bold': '加粗',
        'ql-color': '颜色',
        'ql-font': '字体',
        'ql-code': '插入代码',
        'ql-italic': '斜体',
        'ql-link': '添加链接',
        'ql-background': '背景颜色',
        'ql-size': '字体大小',
        'ql-strike': '删除线',
        'ql-script': '上标/下标',
        'ql-underline': '下划线',
        'ql-blockquote': '引用',
        'ql-header': '标题',
        'ql-indent': '缩进',
        'ql-list': '列表',
        'ql-align': '文本对齐',
        'ql-direction': '文本方向',
        'ql-code-block': '代码块',
        'ql-formula': '公式',
        'ql-image': '图片',
        'ql-video': '视频',
        'ql-clean': '清除字体样式'
      }
    }
},
mounted() {
    this.addQuillTitle();
},
methods: {
    addQuillTitle() {
      const oToolBar = document.querySelector('.ql-toolbar');
      const aButton = oToolBar.querySelectorAll('button');
      const aSelect = oToolBar.querySelectorAll('select');
      const aSpan = oToolBar.querySelectorAll('span');
      aButton.forEach(item => {
        if (item.className === 'ql-script') {
          item.value === 'sub' ? item.title = '下标' : item.title = '上标';
        } else if (item.className === 'ql-indent') {
          item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进';
        } else if (item.className === 'ql-list') {
          item.value === 'ordered' ? item.title = '有序列表' : item.title = '无序列表';
        } else {
          item.title = this.titleConfig[item.classList[0]];
        }
      });
      aSelect.forEach(item => {
        if (!item.classList.contains('ql-color') && item.classList.contains('ql-background')) {
          item.parentNode.title = this.titleConfig[item.classList[0]];
        }
      });
      aSpan.forEach(item => {
        if (item.classList[0] === 'ql-size') {
          const children = item.querySelectorAll('span');
          children.forEach(child => {
            if (child.className === 'ql-picker-label') {
              child.title = '字体大小';
            } else {
              child.title = '';
            }
          });
        } else if (item.classList[0] === 'ql-header') {
          const children = item.querySelectorAll('span');
          children.forEach(child => {
            if (child.className === 'ql-picker-label') {
              child.title = '标题';
            } else {
              child.title = '';
            }
          });
        } else if (item.classList[0] === 'ql-color') {
          const children = item.querySelectorAll('span');
          children.forEach(child => {
            if (child.className === 'ql-picker-label') {
              child.title = '字体颜色';
            } else {
              child.title = '';
            }
          });
        } else if (item.classList[0] === 'ql-background') {
          const children = item.querySelectorAll('span');
          children.forEach(child => {
            if (child.className === 'ql-picker-label') {
              child.title = '背景颜色';
            } else {
              child.title = '';
            }
          });
        } else if (item.classList[0] === 'ql-align') {
          const children = item.querySelectorAll('span');
          children.forEach(child => {
            if (child.className === 'ql-picker-label') {
              child.title = '对齐方式';
            } else if(child.className === 'ql-picker-options') {
              const childes = child.querySelectorAll('span');
              childes.forEach(c => {
                if (c.getAttribute('data-value') === 'center') {
                  c.title = '居中';
                } else if (c.getAttribute('data-value') === 'right') {
                  c.title = '右对齐';
                } else if (c.getAttribute('data-value') === 'justify') {
                  c.title = '两端对齐';
                } else {
                  c.title = '左对齐';
                }
              });
            }
          });
        }
      });
    }
}