当前位置：首页 > news >正文

vue3引用vue-ueditor-wrap组件

news 来源：原创 2025/6/6 21:50:33

参考文档：vue-ueditor-wrap - Vue + UEditor + v-model双向绑定Vue + UEditor + v-model双向绑定https://haochuan9421.github.io/vue-ueditor-wrap/#/home

1.安装组件

npm i vue-ueditor-wrap@3.0.8

2.下载 UEditor

下载链接：https://pan.baidu.com/s/1WEhVbXI_iHW8yU9O_z2hmQ?pwd=f9xo

放在public目录下

3.注册组件

main.ts

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

4.封装组件

/src/components/ueditor/index.vue

<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>

5.页面引用组件

<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
},

效果图