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

微前端环境中:
问题:

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理