今天分享一下我做的项目里面的一个百度富文本的配置问题,安装配置流程以及如何解决的
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 静态资源的根路径,可参考常见问题1
serverUrl: '/pc/pc/Fileimg/uderto', // 服务端接⼝
uploadUrl: '/pc/pc/Fileimg/uderto' + '/kjyl-server-doctor/doctor/file/uploadFile',
// enableAutoSave: true, // 开启从草稿箱恢复功能需要⼿动设置固定的 editorId,否则组件会默认随机⼀个,如果页⾯刷新,下次渲染的时候 editorId 会重新随机,// 服务端接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
});
这样就可以实现啦