关于vue3项目中使用UEditor接入秀米

一、vue3项目中如何使用UEditor

在vue3中使用UEditor是通过 vue-ueditor-wrap这个组件实现的（参考vue-ueditor-wrap官方文档）

安装组件

npm i vue-ueditor-wrap@3.x -S

下载UEditor

UEditor不支持npm下载，所以需要去下载对应的UEditor文件。vue-ueditor-wrap官方文档中提供的有对应的下载文件，或是去UEditor官网下载自己打包。（我选择的是uft8-php文件，下载之后解压即可）

将解压的文件进行项目中的配置

在vue3项目下的public文件下面新建一个文件夹（命名可以自己起，但是后续需要修改一些相关的配置）

1658893949599(1).png

把下载解压的uft8-php文件里的东西全部复制到UEditor文件下边。配置到这里基本上已经可以了。对了，还要找到（ueditor.config.js）配置一下文件路径

window.UEDITOR_HOME_URL = '/public/UEditor/'
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

在项目中使用vue-ueditor-wrap组件

新建UEditor.vue文件（局部注册vue-ueditor-wrap组件）

import {VueUeditorWrap} from 'vue-ueditor-wrap';

通过components进行组件注册

 components:{
     VueUeditorWrap
  }

使用

<vue-ueditor-wrap
        v-model="msg" //编辑器的内容
        :config="editorConfig" //编辑器的配置项
        editor-id="editor-demo-01" //编辑器的id
        class="editor" 
        @before-init="addXiumiDialog" //跟后续引入秀米插件有关系
      ></vue-ueditor-wrap>

对编辑器进行配置，在生命钩子函数created中配置editorConfig

 created() {
    // 更多 UEditor 配置，参考 http://fex.baidu.com/ueditor/#start-config
    this.editorConfig = {
      //关闭默认高度（若改变高度必须要先关闭才可以设置）
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 400,
      UEDITOR_HOME_URL: "/UEditor/", // 访问 UEditor 静态资源的根路径，即在上述在public下创建的/UEditor/文件资源，路径必须正确
      serverUrl: "//ueditor.szcloudplus.com/cos", //官网提供的服务端接口地址，只用于测试，使用次数也有限制，后续需要修改
      catchRemoteImageEnable: true, // 抓取远程图片
    };

这个时候运行项目，我们就可以得到一个UEditor编辑器

二、把秀米插件添加到UEditor中

添加配置秀米所需要的文件

（参考秀米配置官方文档）

一共需要下载4个文件(点击即可下载)

1）internal.js

2）xiumi-ue-dialog-v5.js

3）xiumi-ue-v5.css

4）xiumi-ue-dialog-v5.html

在UEditor根目录下新建xiumi文件夹，把上述2,3,4文件添加到秀米文件夹下边，把1文件添加到UEditor根目录下与xiumi文件同级，结构如下：

在UEditor.vue文件中进行秀米的配置

使用了官网推荐的before-init钩子即在上述使用时所用到的@before-init

在methods方法下编码（注意修改iframeUrl的对应路径）：

methods: {
    addXiumiDialog(editorId) {
      window.UE.registerUI(
        "xiumi-dialog",
        (editor, uiName) => {
          // 创建 “秀米弹窗”
          const dialog = new window.UE.ui.Dialog({
            // 注意：这是 xiumi-ue-dialog-v5.html 文件的访问链接，这个页面会通过 iframe 的方式嵌入到弹窗里
            iframeUrl: "/UEditor/xiumi/xiumi-ue-dialog-v5.html", /////注意路径位置--看你自己创建在什么地方
            editor,
            name: uiName,
            title: "秀米图文消息助手",
            cssRules:
              "width: " +
              (window.innerWidth - 60) +
              "px; height: " +
              (window.innerHeight - 60) +
              "px;"
          });

          // 添加自定义按钮用于唤起“秀米弹窗”
          const btn = new window.UE.ui.Button({
            name: "xiumi-connect",
            title: "秀米",
            cssRules: `background-image: url('//dl.xiumi.us/connect/ue/xiumi-connect-icon.png') !important; background-size: contain;`,
            onclick() {
              dialog.render();
              dialog.open();
            }
          });
          return btn;
        },
        0,/* 指定添加到工具栏上的那个位置，默认时追加到最后 */
        editorId /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
      )
    }
  },

更改xiumi-ue-dialog-v5.html中的internal.js的路径

在你创建的xiumi文件下边找到xiumi-ue-dialog-v5.html文件文件中默认引入的是dialogs下的internal.js，我们需要把路径修改成自己添加的internal.js文件的路径，否则在秀米中导出时不能及时的返回给我们的UEditor编辑器中。

修改UEditor的配置（ueditor.config.js），将其中的“xxs过滤白名单”加上，以及设置远程图片是否抓取到本地保存

section:['class', 'style'],

catchRemoteImageEnable: true //设置是否抓取远程图片

三、 UEditor.vue代码如下:

<template>
    <div class="main">
      <vue-ueditor-wrap
        v-model="msg"
        :config="editorConfig"
        editor-id="editor-demo-01"
        class="editor"
        @before-init="addXiumiDialog"
      ></vue-ueditor-wrap>
      <button @click="submit">提交</button>
    </div>
</template>

<script>
import {VueUeditorWrap} from 'vue-ueditor-wrap';
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const msg = ref(null)
    const router = useRouter();
    function submit() {
        window.localStorage.setItem('msg',this.msg);
        router.push({
            path:'/show'
        })
    }
    return {
      msg,
      submit,
    }
  },
  created() {
    // 更多 UEditor 配置，参考 http://fex.baidu.com/ueditor/#start-config
    this.editorConfig = {
      //关闭默认高度
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 400,
      UEDITOR_HOME_URL: "/UEditor/", // 访问 UEditor 静态资源的根路径
      serverUrl: "//ueditor.szcloudplus.com/cos", //
      catchRemoteImageEnable: true, // 抓取远程图片
    };
  },
  methods: {
    addXiumiDialog(editorId) {
      window.UE.registerUI(
        "xiumi-dialog",
        (editor, uiName) => {
          // 创建 “秀米弹窗”
          const dialog = new window.UE.ui.Dialog({
            // 注意：这是 xiumi-ue-dialog-v5.html 文件的访问链接，这个页面会通过 iframe 的方式嵌入到弹窗里
            iframeUrl: "/UEditor/xiumi/xiumi-ue-dialog-v5.html", /////注意路径位置
            editor,
            name: uiName,
            title: "秀米图文消息助手",
            cssRules:
              "width: " +
              (window.innerWidth - 60) +
              "px; height: " +
              (window.innerHeight - 60) +
              "px;"
          });

          // 添加自定义按钮用于唤起“秀米弹窗”
          const btn = new window.UE.ui.Button({
            name: "xiumi-connect",
            title: "秀米",
            cssRules: `background-image: url('//dl.xiumi.us/connect/ue/xiumi-connect-icon.png') !important; background-size: contain;`,
            onclick() {
              dialog.render();
              dialog.open();
            }
          });
          return btn;
        },
        0,/* 指定添加到工具栏上的那个位置，默认时追加到最后 */
        editorId /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
      )
    }
  },
  components:{
     VueUeditorWrap
  }
};
</script>

<style scoped>
</style>