前段时间，项目有个需求，需要在乾坤的子应用使用UEditor富文本编辑器,技术栈是vue

这里使用了第三方组件 vue-ueditor-wrap

下载

 npm i vue-ueditor-wrap

使用

UEditor资源放在父应用的public文件夹中

在父应用中使用和vue-ueditor-wrap介绍中使用一样，咱们主要说一下子应用的使用:

父应用

在main.js中注册组件

 import VueUeditorWrap from 'vue-ueditor-wrap'
 window.commonComponent = { VueUeditorWrap };

子应用

在需要使用的页面使用组件

html

<template>
  <div class="branch_row">
    <div>
      <VueUeditorWrap
        v-model="returnedPolicy"
        :config="myConfig"
      ></VueUeditorWrap>
    </div>
  </div>
</template>

export default {
  components: {
    VueUeditorWrap: window.commonComponent.VueUeditorWrap,
  },
  data() {
    return {
      returnedPolicy: "",
      myConfig: {
        UEDITOR_HOME_URL: "/UEditor/",
        serverUrl:
          "xxxx",  //  服务端接口
      },
    };
  },
 }

关键点

一定不要在父应用中打开乾坤严格样式隔离，不然会报各种资源上的错误，例：

这种

Cannot read properties of null (reading 'offsetWidth')

或者这种

[vue-ueditor-wrap] UEditor 资源加载失败！请检查资源是否存在，UEDITOR_HOME_URL 是否配置正确！

解决方法

父应用中修改乾坤的沙箱隔离,把严格模式改为false,详细文档见 乾坤官网

start({ 
   sandbox :{strictStyleIsolation:false}, 
 //sandbox :true,   //或者这样也可以
})