vue项目引入vue-ueditor-wrap富文本编辑器

第一个步当然就还是引入第三方依赖

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>

然后我们的富文本编辑器自然就会出现啦