微前端环境中:
问题:
- wangEditor: 无法修改,且无法粘贴复制
- QuillEditor:无法使用工具栏,随意点击后,控制台报错
对于wangEditor解决办法:
plugins: [
{
jsBeforeLoaders: [
{
content: `window.Selection = window.parent.Selection`,
},
],
jsLoader: (code) => {
return code
.replace("n.isCollapsed", "n.baseOffset === n.focusOffset")
.replace("n.collapsed", "n.startOffset === n.endOffset");
},
},
],
具体原理:
- 子应用运行在 iframe内,dom在主应用的shadowdom中,当选中文字时,在主应用监听selectionchange,并且通过 document.getSelection()获取选中的selection,在wangEditor中 会判断这个 selection instanceof window.Selection,很明显主应用的selection 不可能是 iframe 里面window Selection的实例,所以干脆将主应用的 Selection赋值给 iframe 的 Selection
- shadowDom 大坑,详见 stackoverflow,在shadowDom中 Selection.isCollapsed永远为true,相当于永远没有选中,所以只能修改 wangEditor 的代码,让读取 isCollapsed 修改成 baseOffset 和 focusOffset的对比,就知道是否选中了文字了
注意:
n.isCollapsed 和 n.collapsed 相当于是做wangEditor 压缩代码的替换,具体代码在这个地方:
如果出现target出问题,请安装wujie-polyfill:中:EventTargetPlugin插件。vxe-table也需要安装此插件才能正确使用
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。