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