wujie wangEditor 版本：5.1.23, wangeditor/editor-for-vue版本：5.1.12，富文本快速的输入会出现失焦的问题

          目前用下面这个plugins 在降级和非降级似乎都挺好用的，wangEditor 版本：5.1.23

plugins: [
    {
      jsBeforeLoaders: [
        {
          callback: (appWindow) => {
            Object.defineProperties(appWindow, {
              Selection: {
                get: () =>
                  appWindow.__WUJIE.degrade
                    ? appWindow.__WUJIE.document.defaultView.Selection
                    : appWindow.parent.Selection,
              },
              DataTransfer: {
                get: () =>
                  appWindow.__WUJIE.degrade
                    ? appWindow.__WUJIE.document.defaultView.DataTransfer
                    : appWindow.parent.DataTransfer,
              },
            });
          },
        },
      ],
      jsLoader: (code) => {
        return code
          .replace("e instanceof t.Node", "e instanceof (window.__WUJIE.degrade ? window.Node : t.Node)")
          .replace("n.isCollapsed", "n.baseOffset === n.focusOffset")
          .replace("n.collapsed", "n.startOffset === n.endOffset");
      },
    },
  ],

Originally posted by @yiludege in https://github.com/Tencent/wujie/issues/479#issuecomment-1493971201

Apr 10 '23 10:04 yilidan

使用上面的方法，能解决复制粘贴的问题，但是会导致快速输入的时候，会自动失焦

Apr 10 '23 10:04 yilidan

@yiludege 大佬，能帮忙看看吗？

Apr 10 '23 10:04 yilidan

@yiludege 啥时能解决这种问题

Apr 18 '23 09:04 peak1024

建议用quill https://www.cnblogs.com/huanhuan55/p/16500900.html

Apr 19 '23 04:04 peak1024

子应用有braft-editor：^2.3.9编辑器在无界环境下也会出现鼠标指针始终在首位无法改变焦点位置；编辑的时候已存在的内容删除不掉的情况。不在微前端环境就是正常的，怎么解决啊，大佬们～

Apr 25 '23 01:04 keepwe

关于这个wangEditor其实我一早就发现有问题，也在群里提到过，一直没有找到好的解决方案，后面一种用的wujie-vue3 1.0.4版本，虽说报错，但是勉强还是能用

后边升级了wujie-vue3 1.0.12，wangEditor的功能差不多就全军覆没了，即使用了上边的修正方法依旧会造成失焦的问题

我尝试改用了iframe，通过postmessage交互，避免了以上问题


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scm-editor</title>
    <link href="./style.css" rel="stylesheet">
    <style>
        html,body {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #container {
            border: 1px solid #ccc;
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: calc(100vh - 45px);
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="toolbar-container"></div>
        <div id="editor-container"></div>
    </div>

    <script src="./index.js"></script>
    <script>
        function create() {
            const E = window.wangEditor
            if (E == null) return
            const postMessage = window.parent.postMessage
            window.editor = E.createEditor({
                selector: '#editor-container',
                config: {
                    placeholder: 'Type here...',
                    hoverbarKeys: {
                        text: {
                            menuKeys: ['headerSelect', 'insertLink', 'bulletedList', '|', 'bold', 'through', 'color', 'bgColor', 'clearStyle', 'code']
                        }
                    },
                    onChange(editor) {
                        const html = editor.getHtml()
                        postMessage({
                            type: 'getHtml',
                            data: html
                        }, window.location.origin)
                    }
                }
            })
            window.toolbar = E.createToolbar({
                editor,
                selector: '#toolbar-container',
                config: {}
            })
        }
        function calcHeight() {
            const toolbar = document.querySelector('#toolbar-container')
            const container = document.querySelector('#editor-container')
            const height = window.innerHeight - toolbar.clientHeight - 4
            container.style.height = height + 'px'
        }

        function messageHandler(data) {
            const _postMessage = window.parent.postMessage
            switch(data.type) {
                case 'setHtml':
                window.editor.setHtml(data.data)
                break;
                case 'insertText': 
                window.editor.insertText(data.data)
                break
                case 'getHtml':
                _postMessage({
                    type: 'getHtml',
                    data: window.editor.getHtml()
                })
                break;
                case 'getText':
                _postMessage({
                    type: 'getText',
                    data: window.editor.getText()
                })
                break;
            }
        }

        window.onload = function() {
            create()
            setTimeout(() => {
                calcHeight()
            }, 100)
            window.addEventListener('resize', function() {
                calcHeight()
            }, false)

            window.addEventListener('message', function(evt) {
                messageHandler(evt.data)
            }, false)
        }

        window.onbeforeunload = function () {
            window.editor = null
            window.toolbar = null
            window.removeEventListener('resize', function() {
                calcHeight()
            }, false)
            window.removeEventListener('message', function(evt) {
                messageHandler(evt.data)
            }, false)
        }
    </script>
</body>

</html>