安装富文本组件

组件"/>

安装富文本组件

安装vue-ueditor-wrap@3.x：

vue-ueditor-wrap@3.x：一个“包装”了 UEditor 的 Vue 组件，支持通过 v-model 来绑定富文本编辑器的内容，让 UEditor 的使用简单到像 Input 框一样。省去了初始化 UEditor、手动调用 getContent，setContent 等繁琐的步骤。

// vue-ueditor-wrap v3 仅支持 Vue 3
npm i vue-ueditor-wrap@3.x -S
// or
yarn add vue-ueditor-wrap@3.x

下载 UEditorPlus

下载 仓库 的dist文件夹，并放到public下，重命名为UEditorPlus

在main.js注册组件

// main.js
import { createApp } from 'vue';
import VueUeditorWrap from 'vue-ueditor-wrap';
import App from './App.vue';createApp(App).use(VueUeditorWrap).mount('#app');

最后使用v-model：

<template><div class="content"><vue-ueditor-wrap v-model="content" editor-id="editor" :config="editorConfig":editorDependencies="['ueditor.config.js', 'ueditor.all.js']" style="height:500px;" /></div>
</template>
<script setup>
import { ref } from 'vue';
let content = ref('<p>Hello UEditorPlus</p>')
let editorConfig = {serverUrl: '后端服务，下面后端的上传接口',// 配置UEditorPlus的惊天资源UEDITOR_HOME_URL: '/UEditorPlus/'
}
</script>

原创作者：吴小糖

创作时间：2023.11.4