vue项目使用百度UEditor富文本编辑器
2020-07-20 17:59:46

在我们开发过程中或多或少会遇到需要富文本的功能,富文本编辑器其实也很多,但是我们常用的就是那么几个,比如百度UEditor富文本编辑器,这个使用起来也方便,功能也很完善。但是总有那么一点吊胃口,在vue项目中使用的话很难配置,我们今天就来讲讲怎么配置。首先我们去下载【vue-ueditor-wrap】这个插件。然后下载成功了去项目的node_modules文件夹里找到vue-ueditor-wrap文件夹,在找到vue-ueditor-wrap.min.js这个文件,搜索UEDITOR_HOME_URL修改为【UEDITOR_HOME_URL:”./UEditor/“】,这样就不用了配置什么开发路径正式路径了,接着再去修改一下vue-ueditor-wrap-》src-》components-》vue-ueditor-wrap.vue文件中大概17左右,注释掉部分代码,如:

data () {
    return {
        status: 0,
        initValue: '',
        defaultConfig: {
            // VUE CLI 3 会添加 process.env.BASE_URL 的环境变量,而 VUE CLI 2 没有,所以借此设置 UEDITOR_HOME_URL,能涵盖大部分 Vue 开发者的使用场景
            // UEDITOR_HOME_URL: process.env.BASE_URL ? process.env.BASE_URL + '/UEditor/' : '/xhd_admin/dist/UEditor/',
            enableAutoSave: false
        }
    };

这样弄就好了。还有就是百度富文本还是要下载哦,不能只下vue-ueditor-wrap,下载了百度UEditor解压后放到项目的public文件夹下就好了。
使用方法:

<vue-ueditor-wrap v-model="msg" :config="config" />
import VueUeditorWrap from "vue-ueditor-wrap";
data(){
    return{
        config: {
            // 编辑器不自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 240,
            // 初始容器宽度
            initialFrameWidth: "100%",
            // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
            serverUrl: "http://35.201.165.105:8000/controller.php",
            // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
            UEDITOR_HOME_URL: "./UEditor/",
            zIndex: 3500,//层级
        },
    }
}

到了这里就可以使用了。

{{item.name}}