vue-quill-editor 新增自定义格式化事件

[vincentzyc]

下面以新增自定义行高为例：

1. 新增 line-height.js 文件

import Quill from 'quill';
const Parchment = Quill.import('parchment');

class lineHeightAttributor extends Parchment.Attributor.Style {}

const lineHeightStyle = new lineHeightAttributor('lineHeight', 'line-height', {
  scope: Parchment.Scope.INLINE,
  whitelist: ['1', '1.25', '1.5', '1.75', '2', '3'],
});

export default lineHeightStyle;

2. 在 Vue.use(VueQuillEditor) 之前引入

import Vue from "vue";
import Quill from 'quill'
import VueQuillEditor from 'vue-quill-editor'

import LineHeight from './line-height';

Quill.register("formats/lineHeight", LineHeight, true);

Vue.use(VueQuillEditor)

3.使用时(.vue文件)：

<quill-editor ref="myTextEditor" v-model="model" :options="editorOption">
      <el-tooltip class="item" effect="dark" content="行高" placement="top">
        <span>
          <select class="ql-lineHeight">
            <option value="1"></option>
            <option value="1.25"></option>
            <option value="1.5"></option>
            <option value="1.75"></option>
            <option value="2"></option>
            <option value="3"></option>
          </select>
        </span>
      </el-tooltip>
</quill-editor>

  data() {
    return {
      editorOption: {
        placeholder: '请输入文本',
        modules: {
          toolbar: {
            container: '#toolbar',
            // 下面不写也可以
            // handlers: {
            // lineHeight: function (value) {
            //  if (value) {
            //    this.quill.format('lineHeight', value);
            //  }
            //},
            },
          },
        },
      },
    };
  },

.ql-picker.ql-lineHeight>.ql-picker-label {
    &::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      color: #333;
      font-size: 20px;
    }

    &>svg {
      display: none;
    }
 }
.ql-lineHeight>.ql-picker-label::before {
   content: 'L';
}
.ql-picker.ql-lineHeight .ql-picker-item:before {
   content: attr(data-value);
}

注意：有几个值必须对应，不然无效

const lineHeightStyle = new lineHeightAttributor('lineHeight', 'line-height', {
  scope: Parchment.Scope.INLINE,
  whitelist: ['1', '1.25', '1.5', '1.75', '2', '3'],
});
// lineHeight

<select class="ql-lineHeight">
   <option value="1"></option>
   <option value="1.25"></option>
   <option value="1.5"></option>
   <option value="1.75"></option>
   <option value="2"></option>
   <option value="3"></option>
 </select>
// ql-lineHeight 的 lineHeight

handlers: {
  lineHeight: function (value) { /** xxx */ },
// lineHeight

上面三个 lineHeight 必须一样