百度了很久，看过很多篇文章，但是有很多都是用了没效果的，自己搞了半天才弄好。

  用来记录，防止自己忘记。以后用可以过来翻。

135的按钮，点击之后可以弹出一个135编辑器的页面.png

在弹窗里面修改了之后，点击完成编辑，可以将修改的内容同步到UEditor.png

话不多话，开始。

首先要先安装npm 安装 vue-ueditor-wrap 这个组件，官方文档。

在这个文档里面有百度ueditor的下载链接，直接下载

随便下，我下的utf8的，只有后端语言部分的不同，前端代码是一样的.png

下载完之后，将文件解压，放到自己项目的public里面。

这里还得在下载135编辑器提供的官方文件，135的地址。

这两个链接.png

将135editor.js文件和下载的html文件更名为135EditorDialogPage.html。将135editor.js放在UEditor的根目录，
在dialogs文件夹下新增135editor文件夹，然后将135EditorDialogPage.html放进去。

项目里的文件结构.png

然后在ueditor.config.js中toolbars项里增加一个135editor菜单项。

135editor.png

到这里准备工作就结束了，下面开始写组件。

<vue-ueditor-wrap
    v-model="msg"
    :config="myConfig"
    @ready="ready"
    @beforeInit="addCustomButtom"
    :editor-dependencies="editorDependencies"
></vue-ueditor-wrap>

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

const myConfig: object = reactive({
  UEDITOR_HOME_URL: "/lib/UEditor/", // 这里的路径要和你UEditor在public文件夹里的一样，不然会报错
  enableAutoSave: false, // 禁用自动保存
  autoFloatEnabled: false, // 关闭菜单悬浮
  initialFrameHeight: 500, // 高度
  autoHeightEnabled: false  // 关闭自动撑高
})

// 引入的js文件，这里是一定要写的，不然135的按钮出不来，之前我就是卡在这里。
const editorDependencies: string[] = reactive(
["ueditor.config.js", "ueditor.all.min.js", "lang/zh-cn/zh-cn.js", "135editor.js"]
);

// 再把css样式放到这里来
<style lang="scss">
  .edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon {
    background-image: url("http://static.135editor.com/img/icons/editor-135-icon.png") !important;
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>

到这里就解决啦。我文件上传用的是自定义的按钮，所以就没配置serverUrl。如果不是自己写的话，还是要配置一下的。

// 文件全部内容  组件的配置我没有写成活得，因为我项目里用不到。
// 里面用了自定义上传视频图片，用不到的可以不写 addCustomButtom 和 el-dialog 里面的东西

// -------------子组件------------------
<template>
    <div>
        <vue-ueditor-wrap
            v-model="msg"
            :config="myConfig"
            @ready="ready"
            @beforeInit="addCustomButtom"
            :editor-dependencies="editorDependencies"
        ></vue-ueditor-wrap>
        <el-dialog v-model="dialogVisible" :title="title" width="30%">
            <el-upload
                class="upload-demo"
                drag
                action=""
                :http-request="handleHttpUpload"
                :accept="accept"
                :before-upload="beforeUpload"
                :show-file-list="false"
            >
                <el-icon class="el-icon--upload">
                    <upload-filled />
                </el-icon>
                <div class="el-upload__text">拖拽文件到此处 或者 <em>点击上传</em></div>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="UEditor">
import { computed, reactive, ref, shallowRef } from "vue";
import { VueUeditorWrap } from "vue-ueditor-wrap";
import { ElMessage, UploadRequestOptions } from "element-plus";
import { uploadImg, uploadVideo } from "@/api/modules/upload";

let accept = ref("");
let title = ref("");
let myConfig: object = reactive({
    UEDITOR_HOME_URL: "/lib/UEditor/",
    toolbars: [
        [
            "fullscreen",
            "source",
            "|",
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "cleardoc",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "|",
            "customisable",
            "paragraph",
            "fontfamily",
            "fontsize",
            "|",
            "directionalityltr",
            "directionalityrtl",
            "indent",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|",
            "touppercase",
            "tolowercase",
            "|",
            "imagenone",
            "imageleft",
            "imageright",
            "imagecenter",
            "|",
            "uploadImg",
            "uploadVideo",
            "horizontal",
            "|",
            "inserttable",
            "deletetable",
            "insertparagraphbeforetable",
            "insertrow",
            "deleterow",
            "insertcol",
            "deletecol",
            "mergecells",
            "mergeright",
            "mergedown",
            "splittocells",
            "splittorows",
            "splittocols",
            "charts",
            "|",
            "135editor"
        ]
    ],
    enableAutoSave: false, // 禁用自动保存
    autoFloatEnabled: false, // 关闭菜单悬浮
    initialFrameHeight: 500,
    autoHeightEnabled: false
});
let dialogVisible = ref(false);
let props = defineProps(["html"]);
const myUEditor = shallowRef();
type EmitProps = {
    (e: "update:html", val: string): void;
    (e: "check-validate"): void;
};
const emit = defineEmits<EmitProps>();
const msg = computed({
    get() {
        return props.html;
    },
    set(val: string) {
        // 防止富文本内容为空时，校验失败
        if (!myUEditor.value.getContent()) val = "";
        emit("update:html", val);
    }
});
const ready = (editorInstance: any) => {
    myUEditor.value = editorInstance;
};
// 自定义上传按钮
const addCustomButtom = () => {
    window.UE.registerUI(
        "uploadVideo",
        function(editor: any, uiName: any) {
            // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function() {
                    editor.execCommand("inserthtml", ``);
                }
            });
            // 参考http://ueditor.baidu.com/doc/#COMMAND.LIST
            let btn = new window.UE.ui.Button({
                name: "uploadVideo",
                title: "上传视频",
                cssRules: `background-position: -320px -20px;`,
                onclick: function() {
                    // 渲染dialog
                    title.value = "上传视频";
                    accept.value = "video/*";
                    dialogVisible.value = true;
                    editor.execCommand(uiName);
                }
            });
            return btn;
        },
        51 /* 指定添加到工具栏上的那个位置，默认时追加到最后 */
    );
    window.UE.registerUI(
        "uploadImg",
        function(editor: any, uiName: any) {
            // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand: function() {
                    editor.execCommand("inserthtml", ``);
                }
            });
            // 参考http://ueditor.baidu.com/doc/#COMMAND.LIST
            let btn = new window.UE.ui.Button({
                name: "uploadImg",
                title: "上传图片",
                cssRules: `background-position: -380px 0px;`,
                onclick: function() {
                    // 渲染dialog
                    title.value = "上传图片";
                    accept.value = "image/*";
                    dialogVisible.value = true;
                    editor.execCommand(uiName);
                }
            });
            return btn;
        },
        51 /* 指定添加到工具栏上的那个位置，默认时追加到最后 */
    );
};
// 引入的js文件
let editorDependencies: string[] = reactive(["ueditor.config.js", "ueditor.all.min.js", "lang/zh-cn/zh-cn.js", "135editor.js"]);
// 文件上传
const handleHttpUpload = async (options: UploadRequestOptions) => {
    let { file } = options;
    try {
        let ossRes;
        if (title.value === "上传图片") {
            ossRes = await uploadImg(file.name, file, "image/jpeg");
            myUEditor.value.execCommand("insertHtml", `<img src="${ossRes.url}" style="max-width: 100%">`);
        } else {
            ossRes = await uploadImg(file.name, file, "video/mp4");
            console.log(ossRes, "ossRes");
            myUEditor.value.execCommand(
                "insertHtml",
                "<video src=\"" +
                ossRes.url +
                "\" class=\"playsinline\" controls=\"true\" preload=\"auto\"  style=\"object-fit:fill;width:100%;max-width:360px;\"></video>"
            );
        }
        dialogVisible.value = false;
    } catch (error) {
        console.log(error);
    }
};
// 上传之前
const beforeUpload = (file: any) => {
    if (title.value === "上传图片") {
        if (file.type.indexOf("image") === -1) {
            ElMessage({
                message: "请上传图片类型的文件",
                type: "warning"
            });
            return false;
        }
    } else {
        if (file.type.indexOf("video") === -1) {
            ElMessage({
                message: "请上传视频类型的文件",
                type: "warning"
            });
            return false;
        }
    }
};
</script>

<style lang="scss">
.edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon {
    background-image: url("http://static.135editor.com/img/icons/editor-135-icon.png") !important;
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
}

.edui-editor {
    width: 100% !important;
}

#edui1_iframeholder {
    width: 100% !important;
}

.edui-combox-body,
.edui-button-wrap {
    line-height: normal;
}
</style>


// ----------父组件使用-------------
<UEditor v-model:html="drawerData.content"></UEditor>

好兄弟，如果觉得有用的话点个赞呗😭