quill.js富文本编辑器中自定义标签的创建和使用

Quill是一个很流行的富文本编辑器，github上star大约21k：
github地址 官网地址

安装quill（这里是在vue项目中使用的）

npm install -S quill-image-paste-module quill-image-resize-module vue-quill-editor

如何在项目中使用请看官网，这里主要记录一下如何使用自定义标签，很多时候，我们需要在标签中增加自定义属性，或者新增quill原生不带有的标签，比如video，audio
新增blot文件

// video.ts
import { Quill } from 'vue-quill-editor';
const BlockEmbed = Quill.import('blots/block/embed');
class VideoBlot extends BlockEmbed {
  private static create(value: any) {
    const node = super.create();
    node.setAttribute('src', value.url);
    node.setAttribute('controls', value.controls);
    node.setAttribute('width', '100%');
    node.setAttribute('height', 'auto');
    node.setAttribute('webkit-playsinline', true);
    node.setAttribute('playsinline', true);
    node.setAttribute('x5-playsinline', true);
    node.setAttribute('contentid', value.contentid);
    node.setAttribute('poster', value.poster);
    return node;
  }

  // 这里是要回写的时候显示的属性，如果不写，就是undefined
  private static value(node: any) {
    return {
      url: node.getAttribute('src'),
      controls: node.getAttribute('controls'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height'),
      contentid: node.getAttribute('contentid'),
      poster: node.getAttribute('poster'),
    };
  }
}
VideoBlot.blotName = 'simple_video';
VideoBlot.tagName = 'video';
export default VideoBlot;

img标签的修改和audio标签类似
在项目中引用

// index.ts
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { Quill as _Quill } from 'vue-quill-editor';
import VideoBlot from './blot/video';
_Quill.register(VideoBlot); // h5 video 标签

@Component({
  name: 'quill',
  components: {
  },
})
export default class Quill extends Vue {
	public get editor() {
		return (this.$refs.textEditor as any).quill;
	}
	public mounted {
		//insertEmbed 插入图片
		this.editor.insertEmbed(length, 'simple_video', {
		    url: '视频地址',
		    controls: 'controls',
		    width: '100%',
		    height: 'auto',
		    poster: '视频首帧',
		    contentid: ‘112313121323’,
		});
	}	
}