我们从官方地址下载资源包 https://ueditor.baidu.com/website/download.html!
企业微信20190305025245.png
这里我下载的是UTF-8版本,解压目录如下图:(这里我已php为例)

企业微信20190305025500.png

企业微信20190305030013.png

<template>
<div class="content">
    <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="50px">
        <el-form-item label="标题" prop="a_title">
            <el-input v-model="infoForm.a_title"></el-input>
        </el-form-item>
        <!--富文本编辑器-->
        <el-form-item label="内容" prop="a_content">
               <vue-ueditor-wrap v-model="infoForm.a_content" :config="myConfig" :destroy="true"></vue-ueditor-wrap>
        </el-form-item>

        <el-form-item class="upload">
            <el-button type="success" @click="onSubmit">发布文章</el-button>
            <el-button class="btn" @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
import { uploadArticle } from "@/api/table";
export default {
  components: {
    //使用编辑器
    VueUeditorWrap
  },
  data() {
    return {
      infoForm: {
        a_title: "",
        a_content: ""
      },
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: true,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: "100%",
        //这么配置的原因是自动检测我们的环境更换我们的访问地址
        serverUrl: process.env. BASE_API + "/static/UEditor/php/controller.php",
      },
      //表单验证
      rules: {
        a_title: [
          {
            required: true,
            message: "请输入文章标题",
            trigger: "blur"
          }
        ],
        a_content: [
          {
            required: true,
            message: "请输入文章内容",
            trigger: "blur"
          }
        ]
      }
    };
  },

  methods: {
    onSubmit() {
      //提交
      //this.$refs.infoForm.validate，这是表单验证
      this.$refs.infoForm.validate(valid => {
        if (valid) {
          console.log("this.infoForm :", this.infoForm);
          uploadArticle(this.infoForm.a_title, this.infoForm.a_content)
            .then(response => {
              this.resetForm(); //重置发布表单
              this.$confirm("文章发布成功", {
                confirmButtonText: "确定",
                showCancelButton: false,
                type: "success"
              });
            })
            .catch(error => {});
        }
      });
    },
    //重置表单
    resetForm() {
      this.$refs["infoForm"].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20px 40px;
}

.upload {
  display: flex;
  justify-content: center;
}
</style>

2.后台代码配置
后台我使用的是Thinkphp5,我们php代码跟前端目录结构一样,放在public/static/UEditor目录下,如下图:

企业微信20190305030834.png

因为是vue的项目,必然会出现跨域的现象,我们在php/controller.php文件夹开启允许跨域设置,如下图:

企业微信20190305031223.png

这样不出意外的话我们的编辑器是配置成功了

企业微信20190305031337.png

还是有点细节我们需要注意,当你上传图片的时候,你发现能够上传成功,图片也上传到后台了,就是编辑器中图片不显示,你调试你会发现他的url地址不太对,他拿着vue-server的地址+图片路径拼接的,这肯定是访问不到的,我们需要配置下后台的文件前缀,主要是在php/config.json文件配置

企业微信20190305031752.png

如果我们直接在这里配置是没有问题,就是不太灵活,我们在测试环境和正式环境的地址都不一样,每次上线就要想着更改这里,挺麻烦,我们直接在代码里配置,直接获取协议+地址+端口配置路径,更改controller.php文件 具体如下图

企业微信20190305032030.png

到此为止我们服务器的配置基本完成
如果我们发现上传视频和图片太大上传失败的话,还是后台配置的问题,检查后台post允许上传的文件大小和nginx服务器允许上传的大小,这样基本解决