百度富文本编辑器配置（vue3）-编程知识

百度富文本编辑器配置（vue3）

今天分享一下我做的项目里面的一个百度富文本的配置问题，安装配置流程以及如何解决的

1.首先是安装组件

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

2. 下载 UEditor

UEditor 并不支持通过 npm 的方式来安装，vue-ueditor-wrap 也只是一个 Vue 组件，组件本身并不是 UEditor 的 Vue 版。了解 UEditor 基本使用，请参考 UEditor 官网。

编码方式\语言	PHP	NET	JSP	ASP
utf8	下载	下载	下载	下载
gbk	下载	下载	下载	下载

说明：不同语言的 UEditor，前端部分，并无区别，只是包含了对应语言的服务端示例代码。UEditor 官方并没有提供 Node.js 版的示例代码，有需求的同学可以参考此处。

将解压的文件夹重命名为 UEditor 并移动到你项目的静态资源目录下，比如下面是一个由 Vue CLI（v3+）创建的项目，静态资源目录就是 public。

注意！ pubilc 内不要多层嵌套文件不然会找不到所在的资源，可能会出现如下报错

3.注册组件

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

4.v-model 数据绑定

<vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>

const editorConfig = reactive({// 编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 400,// 初始容器宽度initialFrameWidth: '100%',UEDITOR_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径，可参考常见问题1serverUrl: '/pc/pc/Fileimg/uderto', // 服务端接⼝uploadUrl: '/pc/pc/Fileimg/uderto' + '/kjyl-server-doctor/doctor/file/uploadFile',// enableAutoSave: true, // 开启从草稿箱恢复功能需要⼿动设置固定的 editorId，否则组件会默认随机⼀个，如果页⾯刷新，下次渲染的时候 editorId 会重新随机，// 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
});

这样就可以实现啦