在quill编辑器中集成秀米和135编辑器

1：问题&需求

quill会自动过滤掉秀米和135编辑器文章里面的section之类的元素和样式，导致复制进去的文章排版根本不能看。另外对于第三方应用想集成秀米，秀米官网声明只支持ueditor内核的编辑器。如果项目里用的编辑器不是ueditor内核的，而客户指定要加秀米的功能，咋整？换编辑器？怼客户？换编辑器是不可能换的，这辈子都不可能换的，怼客户又不会，只能删库跑路了？

问题示例：直接复制秀米文章，在quill中样式丢失。

下面直接上成品，有兴趣的继续往下看，没兴趣直接拷贝仓库研究。或者下载vue-quill-xiumi的npm包

示例地址： 在线预览

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

没有quill使用经验的请先看这篇文章：从0开始在vue项目中使用quill编辑器

2：解决办法

下面总结下我如何在vue项目中使用quill集成秀米和135编辑器。

方法简述：

1: 首先自定义一个blot，自定义内容规则，通过走这个blot通道，可以保留样式。（parchment是quill的文档模型，一个parchment树是由blots构成，blot是一个DOM节点的对应物。blots可以提供结构，格式化，或内容，深入了解请点击官网github地址https://github.com/quilljs/parchment#blots ）
2：修改秀米页面的代码，改成走quill的方法插入。所以在quill项目中暴露出一个能插入代码的方法，绑定到window，在秀米页面里使用这个方法，让秀米的数据通过这个方法插入到quill中。
3：使用antd的modal弹出框，在里面用iframe加载秀米的html（注意跨域，建议放项目public目录里）

自定义的blot代码，放置于src/components/blot.js

export default function (Quill) {// 引入源码中的BlockEmbedconst 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%');// 设置自定义htmlnode.innerHTML = this.transformValue(value)// 去掉外面的包裹层return node.firstChild;}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}}// blotNameAppPanelEmbed.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'import blotSelect from './components/blot'blotSelect(Quill)

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

我们打开秀米官网，找到页面底部的"第三方对接秀米"，点击打开后进入 https://ent.xiumi.us/ue/ （如果没有在ueditor集成过秀米的经验，请完整看下秀米官网提供的ueditor集成秀米教学）

按照指引下载这个页面，把页面放到项目里，博主是在public下新建了一个pluging文件夹（下面是秀米官网的截图）

https://ent.xiumi.us/ue/xiumi-ue-dialog-v5.html

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

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

   // 可以删掉页面上的internal.js引用了var parent = window.parent; // 新增代码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) // quill 改动// 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"><!-- 秀米页面的路径地址要注意 --><!--fullheight: document.documentElement.clientHeight --><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: 0this.quill.insertEmbed(index ||  0, 'AppPanelEmbed', e)this.visible = falsethis.visible2 = false},showModal() {this.visible = true},

注意 setRichText方法，绑定到window上，这样在xiumi-ue-dialog-v5.html 页面中能接收到message，并插入到quill里。

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

3：实现复制黏贴功能

直接复制文本进quill编辑器会被筛过一层，最终呈现在quill中只有p、span、h1等少数几个标签。如果我们想实现秀米文章复制进编辑器而不被过滤，怎么实现呢？

监听粘贴板，接管用户的粘贴功能。

监听粘贴

   listenPaste() {document.querySelector('.quill-editor').addEventListener('paste', (e) => {const msg = (e.clipboardData || window.clipboardData).getData('text/html') // 获取粘贴板文本if(msg) { // 如果为空，则不拦截e.preventDefault(); // 阻止复制动作e.stopPropagation(); // 阻止冒泡const value = new DOMParser().parseFromString(msg,'text/html').body.childNodes // 转成nodesthis.nodesInQuill(value)}})},

只针对section标签的代码块

   nodesInQuill(originNode) {for(let i = originNode.length - 1; i >= 0; i --) {if(originNode[i].localName === 'section') {this.setRichText(originNode[i].outerHTML, 0)} else {this.quill.clipboard.dangerouslyPasteHTML(0, originNode[i].outerHTML)}}},

4：最终效果

5：问题&bug

1：编辑器文本长度bug：quill自带的getLength方法能返回编辑器内容的长度。
2：复制功能问题：用户的复制到剪切板的内容到底是什么，永远是一个谜。因此目标文章被用户复制操作后，在quill里呈现出的内容，很难保证是完美无缺的。
3：http下，部分电脑环境的浏览器下（包括谷歌），有时候秀米弹窗点保存不能自动插入编辑器中。解决办法：换浏览器（换edge或360其他编辑器试试），上线后改成https环境一般都能解决。
4：秀米插入编辑器前需要做图片本地化处理才能正常显示。
5：在ip访问下无法登录秀米。（localhost却可以，秀米后端if else少写一个？）

6：总结

项目目录结构

总结一些坑
坑1：quill样式过滤的坑
坑2：秀米的iframe页面数据传输
坑3：数据回显的时候，如果有section之类的元素，也会被过滤，所以在回显数据的时候也需要处理
坑4：通过blot通道进入的数据，会包一层标签，需要特意去掉（不然数据回显一次加一次标签）

默认情况下，quill直接过滤了“脏html”，输出简洁的p，span等标签，体现了quill简洁、轻便的设计和风格，但有时候也成了缺陷。但深入了解quill，能发现它对开发者还是很友好的，定制开发空间很大。

此外秀米官官方说只支持ueditor，没有支持其他编辑器的计划。在这里我提醒下，要有发现兼容的眼睛，秀米数据传输很直白，其实改下能适应很多场景。最后总结，多看官网文档。

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

都看到这里了，如果我的方法确实对你有启发，请在我github上点个❤

12-21更新

135不能带入数据的问题（注意：秀米不支持带入数据）
步骤1 ：在quill页面暴露一个方法，winodw.getHtml()，用来获取编辑器内容

window.getHtml = this.getHtml

然后在methods中注册方法

getHtml() {return this.$refs.editor.children[0].innerHTML
}

步骤2：修改xiumi-ue-dialog-v5.html文件
xiumi-ue-dialog-v5.html官方页面里所有方法是针对ueditor编辑器写的，因此留下editor135.contentWindow.postMessage方法其他直接改掉。

var editor135 = document.getElementById('editor135');
var parent = window.parent;
window.onload = function () {setTimeout(function(){editor135.contentWindow.postMessage(parent.getHtml(),'*');}, 3000);
};

完成

2021-11-24更新
update：秀米更新它的dialog.html了，改了PostMessage函数的参数。

result：现在秀米在开发环境下已经无法插入数据了，开发体验↓开发难度↑。
ps：之前秀米偷偷换硬盘，清空老资源的同时，还顺便换掉了秀米的icon图标url，也是闷声坑人