关于微前端:无界微前端环境中wangEditor-QuillEditor富文本编辑器无法正常使用问题解决

8次阅读

共计 767 个字符，预计需要花费 2 分钟才能阅读完成。

微前端环境中：
问题：

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 压缩代码的替换，具体代码在这个中央：

正文完