微服务qiankun中使用子应用复用主应用的ueditor组件，子应用复用主应用组件

缺乏、安全感 2022-12-12 15:29 82阅读 0赞

以vue-cli 3.0版本生成的单页面项目为例

从官方下载ueditor的压缩包后解压到主应用的public目录下

如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70][]

安装** vue-ueditor-wrap ** 插件

npm i vue-ueditor-wrap -D

主应用main.js 中加入这两句

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

子应用使用时这样写

<template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png" />
        <HelloWorld msg="Welcome to Your Vue.js App" />
        <vue-ueditor-wrap v-model="msg" :config="myConfig" ref="myueditor"  @ready="ready"></vue-ueditor-wrap>
        <div @click="getContent">获取编辑器内容</div>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from "@/components/HelloWorld.vue";
    
    export default {
      name: "Home",
      components: {
        HelloWorld,    
        VueUeditorWrap: window.__POWERED_BY_QIANKUN__ ? window.commonComponent.VueUeditorWrap : import('vue-ueditor-wrap')
      },
      data(){
        return{
          msg: '123',
          myConfig: {        
            // 编辑器不自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 240,
            // 初始容器宽度
            initialFrameWidth: '100%',
            // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！部署在国外的服务器，如果无法访问，请自备梯子）
            serverUrl: 'http://35.201.165.105:8000/controller.php',
            // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
            // UEDITOR_HOME_URL: process.env.BASE_URL + 'UEditor/'
            UEDITOR_HOME_URL:'http://localhost:8080/UEditor/'        
          },
          editorInstance: null
        }
      },
      methods:{
        ready(editorInstance) {
          console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
          this.editorInstance = editorInstance
        },
        getContent() {
          console.log(this.msg)
          console.log(this.$refs.myueditor)
        }
      }
    };
    </script>

其中有二句配置比较重要

其一：

VueUeditorWrap: window.__POWERED_BY_QIANKUN__ ? window.commonComponent.VueUeditorWrap : import('vue-ueditor-wrap')

这句是注册挂载 VueUeditorWrap组件，如果window下有**\_\_POWERED\_BY\_QIANKUN\_\_ 这个变量，则认为当前是qiankun下的子应用环境，直接使用在主应用下挂载到window的组件 **VueUeditorWrap

否则就 **import('vue-ueditor-wrap')**

**UEDITOR\_HOME\_URL**

**该变量是指向UEditor的压缩文件。没有其他要求，就是指向一个可以用的资源路径，可以使用本目录中的，也可以使用其他线上的地址。**

最终结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1][]

更多用法可以查阅[vue-ueditor-wrap该组件 ][vue-ueditor-wrap]

此复用组件的方法 同时也适用于其他组件

更多关于qiankun实践的总结，可以看下[这个文章。][Link 1]

10.1结束，明天上班。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221123/06de6510c0d44296a7169ba201209004.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]: /images/20221123/40b7459d55dd44599e233f8f2539c39e.png
[vue-ueditor-wrap]: https://github.com/HaoChuan9421/vue-ueditor-wrap
[Link 1]: https://juejin.im/post/6856569463950639117#heading-26