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’,
		});
                                    在项目中需求在文本框中添加一个链接，链接的a标签要带有href、id、data-value等自定义属性，但是通过富文本定义的链接只能添加href绑定在a标签上。之前在百度上面找到类似的文章但是都出现一些小问题，目前都处理ok。在此留个笔记，提提神哈参考文章：引路文章之vue-quill-editor 如何用insertEmbed插入一个a标签代码实现如下：//引入富文本编辑器import { qu...
< script src =" ./quill-image-paste-module/image-paste.min.js " > </ script >
 var quill = new Quill ( editor , {
  // ...
  modules : {
    // ...
    imagePaste : {
      // options
} ) ;
传递一个空对象，将图像粘贴为base64
 var quill = new Quill ( editor , {
  // ...
  modules : {
    // ...
    imagePaste : { }
} ) ;
 您还可以使用addImageBlob选项将图像上传到服务器
                                    问题描述：
在使用 vue-quill-editor 富文本编辑器过程中，加载已有的富文本数据到编辑器，经常会出现编辑器中莫名其妙多出一段换行内容 <p><br></p>（一般出现在段落与其他内容之间，例如标题，引用，列表），每次重新编辑之前的内容时都必须手动删除这些空行，否则这些换行就会越积越多。这让...
                                    element ui中quill-editor富文本编辑器的使用，可以上传图片视频等文件，可以对图片拖拽居中等操作，可以直接使用。对于视频的回显，需要改写video.js文件，把ifram标签改为video标签。
let BlockEmbed = Quill.import('blots/block/embed');
class CustomImgBlot extends BlockEmbed {
    // 声明内部对象
    static obj = {};
    static get ATTRIBUTES() {
        // 声明元素属性值
                                    vue-quill 上传图片，自定义大小
使用 `@vueup/vue-quill` ,是因为使用 `vue-quill-editor` 老是有一堆报错
`imports of undefined`，`undefined (reading 'register')`之类的
逻辑大概是这样的，后台编辑文章的时候定义一个自定义的’商品标签’，标签里包含商品信息:图片，名称，价格，前端拿到文章富文本后，对’商品标签’进行特殊处理，并加上样式进行显示。本文只对后台操作进行解释，前端不作解释。
ueditor示例
由于我们后台使用的是ueditor，这里以uedit