在这阳光明媚的一天，笔者接了一个产品需求，在现有产品中增加一个富文本编辑。作为一个经验丰富的程序员欣然答应，然后就是开始调研选型。最终选择了wangeditor编辑器。
然后就是开撸，本地先起一个工程测试，非常完美，功能正常开箱即用。确认没问题之后就直接将代码进行迁移集成到现行项目中试试咸淡。本来在已经在dom里验证过了，想着也没啥问题，早点搞完早点下班，没想到迁移进去wujie子项目中之后有点出乎意料。
编辑器显示正常，but你这功能按钮点击无效果是什么鬼，输入一直飙红 Cannot resolve a Slate range from DOM range：又是什么鬼！！！这完全不能用啊。
完了今天别想早点下班了，为了早点下班我先挂上梯子去git上看看issue有没有类似的问题，找到一个说是和wujie有冲突但是没解决方案。头疼问问人工智障，他回答说什么版本兼容性、语法错误啊让我去排查，真是驴唇不对马嘴。只能发挥程序员良好的网上冲浪能力，终于功夫不负有心人找到一篇文章，这位大佬也是在wujie中使用wangeditor遇到了问题，和我这个类似我猜测原因一样，于是乎撸起袖子就是干，去尝试下看看能不能解决我遇到的额问题。
先按照文章思路在主应用里面进行组件封装发现，编辑器功能完好无损，功能正常使用，可行！！！不用加班有望！！！
继续加油干啊先在主应用搞个组件，然后route文件里面注册一下，然后在子应用里面通过iframe进行引用。
子应用组件使用部分代码
<template>
<iframe
@load="iframeLoad"
id="EditorId"
:src="iframeUrl"
width="100%"
style="
border: none;
"
></iframe>
</template>
<script>
//处理本地开发和线上问题
iframeUrl.value =
window.location.hostname == 'localhost'
? `http://localhost:8080/路由地址`
: `${window.location.origin}/路由地址`
</script>
尝试了一下发现可以在子应用中正常使用，下一步就是解决通讯问题那就直接使用window的postMessage进行通讯
主应用代码
const postMessage = data => {
if (data.task == 'change') {
window.parent.postMessage(data, '*')
}
}
const parentPostMessage = event => {
if (event.data.task == 'setValue') {
content.value = event.data.data
}
}
onMounted(async () => {
window.addEventListener('message', parentPostMessage)
})
子应用代码
const parentPostMessage = event => {
if (event.data.task == 'change') {
console.log(event.data.data)
}
}
const postMessage = task => {
document.getElementById('EditorId')?.contentWindow.postMessage(task, '*')
}
onMounted(async () => {
window.parent.addEventListener('message', parentPostMessage)
})
测试了一下发现好用！！现在需求基本上已经可以完成需求后面参考文章进行样式优化，然后打包部署放到开发网环境验证下，发现和本地没什么问题。提测！！！！
