quill 富文本插入自定义html代码

1. 使用blot来进行，在new Quill()前先定义自定义的内容，并且注册成为quill的自定义菜单

// 尝试加入自定义blot
      const BlockEmbed = Quill.import('blots/block/embed');
      class AppPanelEmbed extends BlockEmbed {
        static  create(value:any) {
          const node = super.create(value);
          node.setAttribute('contenteditable','false');
          node.setAttribute('width','100%');
          // 设置自定义html
          node.innerHTML = this.transformValue(value);
          return node;
        }

        static transformValue(value:any) {
          let handleArr = value.split('\n');
          handleArr = handleArr.map( (e:any) => {return e.replace(/^[\s]+/, '').replace(/[\s]+$/, '')});
          return handleArr.join('')
        }

        // 返回节点自身的value值
        static value(node:any) {
          return node.innerHTML;
        }
      }
      // blotName
      AppPanelEmbed.blotName = 'AppPanelEmbed';
      // class名将用于匹配blot名称
      AppPanelEmbed.className = 'embed-innerApp';
      // 标签类型自定义
      AppPanelEmbed.tagName = 'div';
      Quill.register(AppPanelEmbed, true);

      // 完毕

2. 在合适的位置调用转换方法就可以将html代码转换成quill的数据格式了

quill.insertEmbed(quill.getSelection().index || 0, 'AppPanelEmbed', 'html代码块');