第一个步当然就还是引入第三方依赖
npm i vue-ueditor-wrap
引入成功后 我们需要一个UEditor包
这里我上传了这个资源给大家下载
UEditor下载地址
然后我们将下载的文件解压出来
放在项目跟目录下 的 public文件夹 下的 lib文件夹 中
然后在main.js中引入
import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('vue-ueditor-wrap', VueUeditorWrap)
然后在App.vue根组件中引入
import Vue from 'vue'
import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('VueUeditorWrap', VueUeditorWrap)
然后在需要用这个组件的vue文件中可以直接使用
参考代码如下
<template>
<div>
<vue-ueditor-wrap v-model="formInline.content" :config="myConfig">
</div>
</template>
<script>
export default {
name:"addUser",
data(){
return {
myConfig: {
UEDITOR_HOME_URL: `${process.env.BASE_URL}lib/UEditor/`,
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 200,
// 初始容器宽度
initialFrameWidth: '100%',
// 关闭自动保存
enableAutoSave: false,
imagePopup: true,
imageScaleEnabled: true,
// toolbarTopOffset:400,
autoFloatEnabled: false,
serverUrl: ''
},
formInline:{
content: ''
}
}
}
methods:{
}
}
</script>
<style scoped>
</style>
然后我们的富文本编辑器自然就会出现啦