import VueUeditorWrap from 'vue-ueditor-wrap';
import { createApp } from "vue";
const app = createApp(App);
app.use(VueUeditorWrap)

<template>
    <vue-ueditor-wrap v-model="state.editorVal" :config="editorConfig" :editor-id="props.editorId" @ready="ueready"
        @input="handleInput" claas="ueditor-wrap"></vue-ueditor-wrap>
</template>
  
<script setup lang="ts" name="Ueditor">
import { ref, onMounted, reactive, watch, getCurrentInstance } from 'vue'

// 定义父组件传过来的值
const props = defineProps({
    editorId: {
        type: String,
        default: 'editor1'
    },
    // 双向绑定，用于获取 editor.getHtml()
    getHtml: String,
})

// 定义子组件向父组件传值/事件
const emit = defineEmits(['update:getHtml']);

const state = reactive({
    editorVal: props.getHtml,
});
const { proxy }: any = getCurrentInstance();
const editorConfig = {
    UEDITOR_HOME_URL: './UEditor/', // 访问 UEditor 静态资源的根路径，可参考常见问题1
}

function ueready(edt) {
    //WordPaster快捷键 Ctrl + V
    edt.addshortcutkey({
        "wordpaster": "ctrl+86"
    });
}
const handleInput = (val: string) => {
    // console.log("handleInput===", val);
    emit('update:getHtml', val);
};

watch(
    () => state.editorVal,
    (val) => {
        emit('update:getHtml', val);
    },
    {
        deep: true,
    }
);
</script>

<style scoped lang="scss"></style>

<Ueditor editorId="Ueditor1" v-model:get-html="ruleForm.content"></Ueditor>
<Ueditor editorId="Ueditor2" v-model:get-html="ruleForm.wxcontent"></Ueditor>

import Ueditor from '/@/components/ueditor/index.vue';

components: {
	Ueditor
},