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 uiquill-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