一文教你在quill编辑器中集成秀米编辑器和135编辑器

1：问题&需求

大家知道，quill会自动过滤掉秀米和135编辑器文章里面的section之类的样式，导致复制进去的文章排版根本不能看。秀米官网声明只支持ueditor内核的编辑器内核。如果项目里用的编辑器不是ueditor内核的，而客户一定要秀米的功能，咋整？换编辑器？怼客户？换编辑器是不可能换的，这辈子都不可能换的。怼客户又不会，只能自己开发一个这样子。

下面直接上成品，有兴趣的继续往下看，没兴趣直接拷贝仓库研究。

示例地址： 在线预览

github仓库：https://github.com/font-size/quill-xiumi-135

本文教你如何在vue项目中使用quill编辑器集成秀米编辑器和135编辑器。

　　秀米样式

　　直接复制到quill的样式

 

1：解决思路

quill中有自定义的blot，可以防止过滤掉自己不想过滤的内容。地址 https://github.com/quilljs/parchment#blots 

　　在项目里自定义个blot.js

export default function (Quill) {
  // 引入源码中的BlockEmbed
  const BlockEmbed = Quill.import('blots/block/embed');
  // 定义新的blot类型
  class AppPanelEmbed extends BlockEmbed {
    static create(value) {
      const node = super.create(value);
      // node.setAttribute('contenteditable', 'false');
      // node.setAttribute('width', '100%');
      //   设置自定义html
      node.innerHTML = this.transformValue(value)
      return node;
    }

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

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

　　接着在vue页面引入

// 引入原始组件
  import * as Quill from 'quill'
  // 引入核心样式和主题样式
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  // 引入自定义blot
  import blotSelect from './components/blot'
  blotSelect(Quill)

　　通过自定义blot只完成了一步，即开辟了一个不会被quill过滤的通道，那如何让秀米代码走这里呢？

我们打开秀米官网，找到页面底部的"第三方对接秀米"，点击打开后进入 https://ent.xiumi.us/ue/ 

　　下载这个页面

 

 

 看页面代码，秀米自己包了一层iframe，通过层层传递message的方式，向上传递数据，最后被ueditor接收到，然后插入到编辑器里。

那么我们手动改，改成quiill接收，并通过我们之前自定义的blot通道插入内容即可。

　　xiumi-ue-dialog-v5.html 页面js代码修改

    var parent = window.parent; // quill实例 修改1
    var xiumi = document.getElementById('xiumi');
    var xiumi_url = window.location.protocol + "//xiumi.us";
    xiumi.onload = function () {
        console.log("postMessage");
        xiumi.contentWindow.postMessage('ready', xiumi_url);
    };
    document.addEventListener("mousewheel", function (event) {
        event.preventDefault();
        event.stopPropagation();
    });
    window.addEventListener('message', function (event) {
        if (event.origin == xiumi_url) {
            parent.setRichText(event.data) // 插入内容 修改2
            // editor.execCommand('insertHtml', event.data);
            // dialog.close();
        }
    }, false);

　　

数据传输功能已经完成，现在来完善整个流程。

秀米需要弹出框，我们下载了antdUi（你也可以用elementUi），使用里面的modal组件。

　　app.vue

  <a-modal v-model="visible" title="秀米" width="90%" :footer="null" :maskClosable="false" :centered="true" :keyboard="false">
      <div v-if="visible">
        <iframe src="./pluging/xiumi-ue-dialog-v5.html" frameborder="0" width="100%" :height="(fullheight - 150)+'px'" id="xiumiIframe">iframe>
      div>
    a-modal>

　　app.vue 相关js

    setRichText(e) {
      const index = this.selection?this.selection.index: 0
      this.quill.insertEmbed(index ||  0, 'AppPanelEmbed', e)
      this.visible = false
      this.visible2 = false
    },
    showModal() {
      this.visible = true
    },

注意，需要把 setRichText方法绑定到window上，这样在xiumi-ue-dialog-v5.html 页面才能通过方法接收到message后插入到quill里。

  mounted () {
    // 初始化编辑器
    this._initEditor()
    window.setRichText = this.setRichText
  },

4：效果图

 

 

 

 

4：总结

这里有几个坑，quill直接过滤了“脏html”，没有像ueditor可以进行配置，开始对它简直束手无策。然后秀米官网说只支持ueditor，我通过qq群咨询了秀米官方人员，也明确告诉我只支持ueditor，没有支持其他编辑器的计划。

但客户那边明确要秀米之类的编辑器，在项目中也不好换编辑器，只能硬着头皮看源码。整个数据传递过程中，只需要改动最后一步，既最终把message插入到编辑器的步骤，把ueditor转换成quill。拿到data后，再通过我们自定义的quill里的blot新通道，避免过滤样式，最终成功插入秀米！

网上目前没有相关quill集成秀米的示例，我希望我的方法能提供大家一些思路。