编辑器 quill 优化项收集 3+

对齐：用 style=”text-align:center” 属性代替 quill 的 class=”ql-align-center” 版对齐功能

import Quill from 'quill';
const QuillAlign = Quill.import('attributors/style/align');
QuillAlign.whitelist = ['right', 'center', 'justify'];
Quill.register(QuillAlign, true);

字号：用 style=”font-size:18px;” 代替 quill 的 class=”ql-size-large” 版字号功能

import Quill from 'quill';
const QuillFontSizeStyle = Quill.import('attributors/style/size');
QuillFontSizeStyle.whitelist = ['12px', '14px', '16px', '18px']; // 列出全部需要用到的（并不一定会全部显示出来供用户选择）
Quill.register(QuillFontSizeStyle, true);

export default {
  data() {
    return {
      quillConfig: {
        theme: 'snow',
        modules: {
          toolbar: [
            [{ size: ['14px', '16px'], }], // 从 whitelist 中挑选需要使用的值
          ],
        },
      },
    };
  },
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: attr(data-value);
}

视频：用 video 标签代替 quill 的 iframe 版添加视频功能

/**
 * 用法：
 *  将以下内容保存为 ./quill-video.js 
 *  之后：
 *    import Quill form 'quill';
 *    import Video from './quill-video.js';
 *    Quill.register(Video, true);
 */
import Quill from 'quill';

const BlockEmbed = Quill.import('blots/block/embed');
const Link = Quill.import('formats/link');
const ATTRIBUTES = ['height', 'width'];

class Video extends BlockEmbed {
  static create(value) {
    let node = super.create(value);
    node.setAttribute('src', value.url);
    node.setAttribute('poster', value.poster);
    node.setAttribute('controls', value.controls);
    node.setAttribute('width', value.width);
    node.setAttribute('height', value.height);
    node.setAttribute('loop', value.loop);
    node.setAttribute('autoplay', value.autoplay);
    node.setAttribute('muted', value.muted);
    return node;
  }
  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }
  static sanitize(url) {
    return Link.sanitize(url);
  }
  static value(domNode) {
    // 设置值包含宽高，为了达到自定义的效果
    // 宽高为空的话，就按100%算
    return {
      url: domNode.getAttribute('src'),
      poster: domNode.getAttribute('poster'),
      controls: domNode.getAttribute('controls'),
      width: domNode.getAttribute('width'),
      height: domNode.getAttribute('height'),
      autoplay: domNode.getAttribute('autoplay'),
      loop: domNode.getAttribute('loop'),
      muted: domNode.getAttribute('muted'),
    };
  }
  format(name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }
  html() {
    const { video } = this.value();
    return `<a href="${video}">${video}</a>`
  }
}

Video.blotName = 'video';
Video.className = 'ql-video'; // 可添加样式，看主要需要
Video.tagName = 'video'; // 用 video 标签替换 iframe

export default Video;

缩进：用 style=”text-index:2em” 属性代替 quill 的 class=”ql-indent-1″ 版缩进功能

import Quill form 'quill';
import QuillIndent from './quill-indent';
Quill.register(QuillIndent, true);

// ./quill-indent.js
import Quill from 'quill';
export const Parchment = Quill.import('parchment');
const levels = [1,2,3,4,5,6,7,8,9,10];
const multiplier = 2;
class IndentAttributor extends Parchment.Attributor.Style {
  add(node, value) {
    return super.add(node, `${value * multiplier}em}`);
  }
  value(node) {
    return parseFloat(super.value(node)) / multiplier || undefined; // Don't return NaN
  }
};
const IndentStyle = new IndentAttributor('indent', 'text-indent', {
  scope: Parchment.Scope.BLOCK,
  whitelist: levels.map((value) => `${value * multiplier}em}`),
});
export default IndentStyle;