vue项目集成Ueditor使用总结

来源:简书分类: 文章浏览史发布时间:2020-09-07 20:07:11 最后更新:2020-09-07 浏览:990

转载声明：

本文为摘录自“简书”，版权归原作者所有。

原文链接:

https://www.jianshu.com/p/4f1032b2a747

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2020-09-07 20:07:11

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

企业微信20190305025500.png

我们将php代码放到后台,因为我们是vue项目,要做到前后端分离,剩下的资源库都是前端的资源,如果你不是前后端分离的项目,那前端人员什么也不用做了,把这些代码直接放到后台就行了,直接服务器渲染即可(这个方法要比vue项目配置简单很多)
我们将除了php文件夹的文件整理放到一个UEditor文件夹,(一定不要包含后端代码,因为我们后台代码需要更改点源码,你要是不删除,等你打包的时候会把php文件也打包进去,到时候后台人员不注意,直接将他改的源码的php文件会给覆盖掉,为了防止万一,我们前端就把php文件直接删除)将UEditor放到我们vue项目的static目录下,如下图:

企业微信20190305030013.png

1.先说前端的工作
一般富文本编辑器都是用来写文章的,我们建立一个article.vue页面,在这里配置编辑器,具体代码快如下

<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目录下,如下图: