VUE3如何引⼊百度富⽂本编辑器1、安装组件
npm i vue-ueditor-wrap@3.x -S
2、下载UEditor
因为官⽅的我没⽤来，所以我⾃⼰的另外的包，⽤的utf8-jsp
在此感谢⼤佬
3、把下载好的包放在项⽬⽬录下 /public下
4、在main.js⾥进⾏注册
// main.js
import { createApp } from 'vue';
import VueUeditorWrap from 'vue-ueditor-wrap';
图片编辑器appimport App from './App.vue';
createApp(App).use(VueUeditorWrap).mount('#app');
5、v-model绑定数据
<template>
<div class="bg">
<div v-html="msg" class="html"></div>
<vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>
</div>
</template>
<script>
export default {
data() {
return {
msg: "富⽂本编辑器",
editorConfig: {
autoHeightEnabled: false,
initialFrameHeight: 400,
initialFrameWidth: "100%",
UEDITOR_HOME_URL: "/UEditor/", // 访问 UEditor 静态资源的根路径
serverUrl: "", // 服务端接⼝
enableAutoSave: true, // 开启从草稿箱恢复功能需要⼿动设置固定的 editorId，否则组件会默认随机⼀个，如果页⾯刷新，下次渲染的时候 editorId 会重新随机，      },
};
},
mounted() {},
methods: {},
};
</script>
<style lang="less" scoped>
.bg {
width: 95%;
margin: auto;
.html {
height: 200px;
border: 1px solid red;
margin-bottom: 10px;
}
}
</style>
6、效果展⽰