search

Tencent / wujie

极致的微前端框架
https://wujie-micro.github.io/doc/
Other
4.14k stars 595 forks source link

wangEditor处理方案 #598

Open ALLLRON opened 1 year ago

ALLLRON commented 1 year ago 
const plugins = [
  // wangEditor-降级开启模式下
  {
    jsBeforeLoaders: [
      {
        callback: (appWindow) => {
          Object.defineProperties(appWindow, {
            Selection: {
              get: () => appWindow.__WUJIE.document.defaultView.Selection,
            },
            DataTransfer: {
              get: () => appWindow.__WUJIE.document.defaultView.DataTransfer,
            },
          });
        },
      },
    ],
    jsLoader: (code) => {
      return code
        .replace("!!t&&e instanceof t.Node", " e !=null&&typeof e.nodeType === 'number'") 
        .replace("n.isCollapsed", "n.baseOffset === n.focusOffset")
        .replace("n.collapsed", "n.startOffset === n.endOffset");
    },
  },
];

export default plugins;

版本： "vue": "^2.6.11", "@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^1.0.2"

上面这个方案只适用降级的情况下，非降级模式下不适用

ALLLRON commented 1 year ago

非降级模式: 在wangEditor中有看到这位的iframe改造方案微前端iframe兼容

主要还是判断当前是否在wujie下，wangEditor对于hasShadowRoot的判断在wujie中不准确，比较便捷的就是用wujie来进行判断

   jsLoader: (code) => {
      return (
        code.replace(
            "window.document.activeElement&&window.document.activeElement.shadowRoot",
            "((window.document.activeElement && window.document.activeElement.shadowRoot) || window.$wujie )"
          )
          .replace("!!t&&e instanceof t.Node", " e !=null&&typeof e.nodeType === 'number'")
      );
    },
ZhangYC193 commented 6 months ago

@ALLLRON 光标会消失，偶尔错位。

ZChMing8 commented 3 months ago

非降级模式: 在wangEditor中有看到这位的iframe改造方案微前端iframe兼容

主要还是判断当前是否在wujie下，wangEditor对于hasShadowRoot的判断在wujie中不准确，比较便捷的就是用wujie来进行判断

   jsLoader: (code) => {
      return (
        code.replace(
            "window.document.activeElement&&window.document.activeElement.shadowRoot",
            "((window.document.activeElement && window.document.activeElement.shadowRoot) || window.$wujie )"
          )
          .replace("!!t&&e instanceof t.Node", " e !=null&&typeof e.nodeType === 'number'")
      );
    },

请问大佬，子应用引入了wangEditor,如何解决？