微前端环境中:
问题:
- 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 压缩代码的替换,具体代码在这个中央: