<template>
    <div>
    <!-- 其他代码 省略 -->
    
    <FormItem :label="t('ueditor.editor')" type="editor" v-model="baTable.form.items!.editor" prop="editor" @keyup.enter.stop="" @keyup.ctrl.enter="baTable.onSubmit(formRef)" :placeholder="t('Please input field', { field: t('ueditor.editor') })"
    :input-attr= "{
        // UEditor 编辑器初始化之前触发 事件
        onBeforeInit: (editorId: string) => beforeInit(editorId),
        // UEditor ready 时触发
        onReady:  (editor: Object) => reaady(editor),
        // 基础配置项
        config: {
            // zIndex: 9999 ,  //编辑器层级的基数,默认是2025  可解决层级穿透和错乱问题
            // initialFrameHeight: 6666,  //初始化编辑器高度,默认5000
            // 其他更多的配置项
            // 参考 config/ueditor.php 的 base 配置项
            // 查阅 UEditor文档 配置项说明 http://fex-team.github.io/ueditor/#start-config
        },
        // 工具栏上的所有的功能按钮 参考 config/ueditor.php 的 toolbars 配置项
        toolbars: [[
            '', '|', 'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote','pasteplain', '|',
        ]],
        // 需要额外引入 的 css 和  js
        // 一般用于 二开 和 插件 集成
        cssJsDependencies: [],
        // 135 编辑器
        editor135: {
            enable: true, // 是否启用
            appKey: '', // 免登录 的 appKey
            imgAutoTransfer: true, // 图片是否自动转存
            // height: '500', // 弹窗 高度
            // width: '500'  // 弹窗 宽度
        },
    }" />
    
    <!-- 其他代码 省略 -->
    
      <teleport to="body">
        <div v-if="showCustomVueDialog" class="modal-mask">
          <div class="modal-content">
            <p>hi! Vue Dialog!</p>
            <button @click="onVueDialogClose">关闭</button>
          </div>
        </div>
      </teleport>
  </div>
</template>
<script setup lang="ts">
 <!-- 其他代码 省略 -->

// 定义一个处理方法 新增 自定义按钮、自定义弹窗、自定义Vue弹窗
const beforeInit = (editorId: any) => {
    // 自定义按钮
    window.UE.registerUI(
        'my-custom-button',
        (editor, uiName) => {
            // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
            editor.registerCommand(uiName, {
                execCommand() {
                    editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`);
                },
            });

            // 创建一个 button
            const btn = new window.UE.ui.Button({
                // 按钮的名字
                name: uiName,
                // 提示
                title: '鼠标悬停时的提示文字-自定义按钮',
                // 需要添加的额外样式，可指定 icon 图标
                cssRules: `background-image: url('https://haochuan9421.github.io/vue-ueditor-wrap/UEditor/custom/my-custom-button.png') !important; background-size: cover;`,
                // 点击时执行的命令
                onclick() {
                    // 这里可以不用执行命令，做你自己的操作也可
                    editor.execCommand(uiName);
                },
            });

            // 当点到编辑内容上时，按钮要做的状态反射
            editor.addListener('selectionchange', function () {
                const state = editor.queryCommandState(uiName);
                if (state === -1) {
                    btn.setDisabled(true);
                    btn.setChecked(false);
                } else {
                    btn.setDisabled(false);
                    btn.setChecked(state);
                }
            });

            // 因为你是添加 button，所以需要返回这个 button
            return btn;
        },
        0 , /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */
        editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
    );

    // 自定义弹窗
    window.UE.registerUI(
        'my-custom-dialog',
        (editor, uiName) => {
            // 创建 dialog
            const dialog = new window.UE.ui.Dialog({
                // 指定弹出层中页面的路径，这里只能支持页面
                iframeUrl: `https://doc.buildadmin.com/senior/web/formItem.html`,
                // 需要指定当前的编辑器实例
                editor,
                // 指定 dialog 的名字
                name: uiName,
                // dialog 的标题
                title: '这是一个自定义的 Dialog 浮层',
                // 指定 dialog 的外围样式
                cssRules: 'width:600px; height:300px;',
                // 如果给出了 buttons 就代表 dialog 有确定和取消
                buttons: [
                    {
                        className: 'edui-okbutton',
                        label: '确定',
                        onclick() {
                            dialog.close(true);
                        },
                    },
                    {
                        className: 'edui-cancelbutton',
                        label: '取消',
                        onclick() {
                            dialog.close(false);
                        },
                    },
                ],
            });

            // 参考上面的自定义按钮
            return new window.UE.ui.Button({
                name: 'my-custom-dialog-btn',
                title: '鼠标悬停时的提示文字-自定义弹窗',
                cssRules: `background-image: url('https://haochuan9421.github.io/vue-ueditor-wrap/UEditor/custom/my-custom-dialog.png') !important; background-size: cover;`,
                onclick() {
                    // 渲染dialog
                    dialog.render();
                    dialog.open();
                },
            });
        },
        0 /* 指定添加到工具栏上的那个位置，不指定默认时追加到最后 */,
        editorId /* 指定这个UI是哪个编辑器实例上的，不指定默认是页面上所有的编辑器都会添加这个按钮 */
    );

    // 自定义Vue弹窗
    window.UE.registerUI(
        'my-custom-button1',
        (editor, uiName) => {
            return new window.UE.ui.Button({
                name: uiName,
                title: '鼠标悬停时的提示文字-自定义Vue弹窗',
                cssRules: `background-image: url('//cdn.zhenghaochuan.com/p/vue-ueditor-wrap/static/UEditor/utf8-php/custom/my-custom-button.png') !important; background-size: cover;`,
                onclick: () => {
                    showCustomVueDialog.value = true;
                },
            });
        },
        0,
        editorId
    );
    
    // 集成秀米
    window.UE.registerUI(
        'xiumi-dialog',
        (editor: anyObj, uiName: string) => {
            // 创建 “秀米弹窗”
            const dialog = new window.UE.ui.Dialog({
                // 注意：这是 xiumi-ue-dialog-v5.html 文件的访问链接，这个页面会通过 iframe 的方式嵌入到弹窗里
                iframeUrl: '/assets/xiumi/xiumi-ue-dialog-v5.html',
                editor,
                name: uiName,
                title: '秀米图文消息助手',
                cssRules: 'width: ' + (window.innerWidth - 60) + 'px; height: ' + (window.innerHeight - 60) + 'px;',
            })
            
            // 添加自定义按钮用于唤起“秀米弹窗”
            return new window.UE.ui.Button({
                name: 'xiumi-connect',
                title: '秀米',
                // class 类名 
                // className:'edui-for-xiumi', //  与 cssRules 二选一
                // css样式  与 className 二选一
                cssRules: `background-image: url('//dl.xiumi.us/connect/ue/xiumi-connect-icon.png') !important; background-size: contain;`,
                onclick() {
                    dialog.render()
                    dialog.open()
                },
            })
        }, undefined,  /* 0时插入第一位置，undefined时追加到最后 */,
        editorId
    )
    // 您的 其他 功能 或 插件集成 
    // 一切皆有可能、请发挥 您聪明的大脑吧
}

const reaady = (editor: Object) => {
    UEditor.value = editor
    // 您的 其他 业务代码
}

const onVueDialogClose = () => {
    showCustomVueDialog.value = false;
    UEditor.value && UEditor.value.execCommand('inserthtml', `<span>弹窗被关闭了!</span>`);
}
 <!-- 其他代码 省略 -->

</script>

<style scoped lang="scss">
 <!-- 其他代码 省略 -->
 
:deep(.edui-button.edui-for-xiumi .edui-button-wrap .edui-button-body .edui-icon) {
    background-image: url("//dl.xiumi.us/connect/ue/xiumi-connect-icon.png") !important;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
</style>