vue3引用vue-ueditor-wrap组件

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

1.安装组件

npm i vue-ueditor-wrap@3.0.8

2.下载 UEditor

下载链接： pan.baidu /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 },

效果图

​