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

水深无声 2023-01-05 14:28 584阅读 0赞

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

安装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’,
    		});
    	}	
    }

[github]: https://github.com/quilljs/quill/
[Link 1]: https://quilljs.com/