5

微前端环境中:
问题:

  • 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");
      },
    },
  ],

具体原理:

  1. 子应用运行在 iframe内,dom在主应用的shadowdom中,当选中文字时,在主应用监听selectionchange,并且通过 document.getSelection()获取选中的selection,在wangEditor中 会判断这个 selection instanceof window.Selection,很明显主应用的selection 不可能是 iframe 里面window Selection的实例,所以干脆将主应用的 Selection赋值给 iframe 的 Selection
  2. shadowDom 大坑,详见 stackoverflow,在shadowDom中 Selection.isCollapsed永远为true,相当于永远没有选中,所以只能修改 wangEditor 的代码,让读取 isCollapsed 修改成 baseOffset 和 focusOffset的对比,就知道是否选中了文字了

注意:

n.isCollapsed 和 n.collapsed 相当于是做wangEditor 压缩代码的替换,具体代码在这个地方:
image.png

如果出现target出问题,请安装wujie-polyfill:中:EventTargetPlugin插件。vxe-table也需要安装此插件才能正确使用


smallStone
419 声望71 粉丝

前端一枚^_-


引用和评论

0 条评论