Vue + wangeditor 富文本提交图片文章

<!-- npm wangeditor --save -->
<template>
  <div>
    <div style="padding: 20px">
      <el-button type="primary" @click="upText">提交</el-button>
    </div>
    {{ accountInfo.profile.name }}
    <div class="title">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择类型">
              <el-select v-model="form.idChannel" placeholder="类型">
                <el-option
                  v-for="item in channelList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div>
      <div ref="writeContent" class="write-content"></div>
    </div>
  </div>
</template>

<script>
import api from "@/utils/api/article.js";
import wangeditor from "wangeditor";
import { mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      form: {
        title: "",
        idChannel: "",
      },
      channelList: [],
      editor: "",
    };
  },
  created() {
    this.getChannelList();
  },
  //渲染完毕后初始化，否则获取不到元素
  mounted() {
    this.editor = new wangeditor(this.$refs.writeContent);
    this.editor.config.showLinkImg = false;
    this.editor.config.uploadImgServer = "/upload";
    this.editor.config.uploadImgMaxLength = 1;
    this.editor.config.customUploadImg = (files, insert) => {
      // resultFiles 是 input 中选中的文件列表
      // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      console.log(files);
      let f = files[0];
      let formData = new FormData(); //空表单对象
      formData.append("file", f);
      api.uploadImg(formData).then(
        (res) => {
          if (res.msg === "成功") {
            console.log(res);
            insert(res.data.realFileName);
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          this.$message.error(err.data.message);
        }
      );
      // // 上传图片，返回结果，将图片插入到编辑器中
      // insertImgFn(imgUrl)
    };

    this.editor.create();
  },
  computed: {
    ...mapState({
      accountInfo: (state) => state.user.accountInfo,
    }),
  },
  methods: {
    //提交文章
    upText() {
      let json = {
        author: this.accountInfo.profile.name,
        content: this.editor.txt.html().replace(/\%/g, "25%"),
        idChannel: this.form.idChannel,
        title: this.form.title,
      };
      console.log(json);
      let type = true;
      for (let i in json) {
        if (json[i] === "") {
          type = false;
        }
      }
      if (type) {
        //提交
        api.upText(JSON.stringify(json)).then(
          (res) => {
            if (res.msg === "成功") {
              this.$message.success("提交成功");
              console.log(res);
            } else {
              this.$message.error(res.msg);
            }
          },
          (err) => {
            this.$message.error(err.data.message);
          }
        );
      } else {
        this.$message.error("请补全数据");
      }
    },
    //获取分类
    getChannelList() {
      api.getChannelList().then(
        (res) => {
          if (res.msg === "成功") {
            this.channelList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          this.$message.error(err.data.message);
        }
      );
    },
  },
};
</script>

<style scoped>
.title {
  position: relative;
  z-index: 1;
}
.write-content {
  position: relative;
  z-index: 1;
}
</style>