富文本编辑器——wangEditor

1. 安装 cnpm i wangeditor --save
2. 创建一个div, id与下面的一致
3. 看文档开始使用------基本使用-----npm安装
4. 复制粘贴到mounted里面
5. 可以看其他配置信息例如图片

<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="商品标题">
        <el-input
          type="text"
          v-model="form.title"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input type="text" v-model="form.desc" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="所属分类">
        <el-select v-model="form.classify" placeholder="请选择分类">
          <el-option
            v-for="item in classifyList"
            :key="item._id"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品主图">
        <div class="upload-from">
          <!-- 缩略图 -->
          <div
            v-for="(item, index) in form.mainPic"
            :key="index"
            class="small-img"
          >
            <img :src="`${ip}${item}`" width="100%" height="100%" />
            <i
              class="el-icon-delete-solid img-delbtn"
              @click="delImg(index)"
            ></i>
          </div>
          <!-- 上传按钮 -->
          <el-upload
            :action="`${ip}/admin/upload/img`"
            name="myfile"
            :show-file-list="false"
            class="upload-body"
            :on-success="uploadSuccess"
          >
            <i class="el-icon-plus upload-btn"></i>
          </el-upload>
        </div>
      </el-form-item>

      <el-form-item label="价格">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              type="text"
              v-model="form.oldPrice"
              placeholder="商品原价"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-input
              type="text"
              v-model="form.price"
              placeholder="商品一口价"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="规格">
        <el-row
          style="margin: 10px"
          :gutter="20"
          v-for="(item, index) in form.type"
          :key="index"
        >
          <el-col :span="6">
            <el-input
              type="text"
              v-model="item.name"
              placeholder="商品原价"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-input
              type="text"
              v-model="item.price"
              placeholder="商品一口价"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-button
              v-show="form.type.length > 1"
              type="danger"
              size="small"
              icon="el-icon-minus"
              @click="delType(index)"
            ></el-button>
            <el-button
              v-show="index == form.type.length - 1"
              type="success"
              size="small"
              icon="el-icon-plus"
              @click="addType"
            ></el-button>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="商品详情">
        <div id="editor"></div>
      </el-form-item>

      <el-form-item label="是否上架">
        <el-radio v-model="form.isSale" :label="1">上架</el-radio>
        <el-radio v-model="form.isSale" :label="2">下架</el-radio>
      </el-form-item>
      <el-form-item label="是否热销">
        <el-radio v-model="form.hot" :label="0">普通商品</el-radio>
        <el-radio v-model="form.hot" :label="1">热销商品</el-radio>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Editor from "wangeditor";
export default {
  data() {
    return {
      form: {
        title: "",
        desc: "",
        classify: "",
        mainPic: [], //商品主图
        oldprice: "", //商品原价
        price: "", //一口价
        oldprice: "", //原价
        type: [{ name: "", price: "" }], //商品规格
        hot: 0, //是否为热销,0为普通商品。1为热销商品
        isSale: 1, //是否上架，1上架，2下架
      },
      classifyList: [], //所属分类
      ip: "http://localhost:3000",
      editor: null, //富文本编辑器对象
    };
  },
  created() {
    //获取所有分类
    this.$http({
      path: "/admin/classify/query",
      method: "get",
    }).then((res) => {
      // console.log(res);
      this.classifyList = res.result;
    });
  },
  //富文本编辑器
  mounted() {
    this.editor = new Editor("#editor");

    // 配置 server 接口地址
    this.editor.config.uploadImgServer = `${this.ip}/admin/upload/editor/img`;
    this.editor.config.uploadFileName = "editorFile";

    this.editor.create();
  },
  methods: {
    //上传成功的事件
    uploadSuccess(res) {
      // console.log(res);
      this.form.mainPic.push(res.file);
    },
    //删除图片
    delImg(index) {
      this.form.mainPic.splice(index, 1);
    },
    addType() {
      //添加商品规格
      this.form.type.push({
        name: "",
        price: "",
      });
    },
    delType(index) {
      //删除商品规格
      this.form.type.splice(index, 1);
    },
    submit(){ //提交事件
      //商品详情
      let content = this.editor.txt.html()
      
      this.$http({
        path: '/admin/goods/add',
        method: 'post',
        params: {
          title: this.form.title, //商品标题
          desc: this.form.desc, //商品描述
          classify: this.form.classify, //分类名称
          mainPic: JSON.stringify(this.form.mainPic), //商品主图数组，值为图片地址
          price: this.form.price, //商品一口价
          oldPrice: this.form.oldPrice,//商品原价
          type: JSON.stringify(this.form.type), //商品规格
          isSale: this.form.isSale, //商品状态，1上架，2下架
          content: content, //商品详情
          hot: this.form.hot, //热销商品
        }
      }).then(res=>{
        this.$message({
          message: res.msg,
          type: res.code == 200 ? 'success':'error'
        })
      })
    }
  },
};
</script>

<style scoped>
.upload-from {
  display: flex;
  flex-wrap: wrap;
}
.upload-body {
  width: 120px;
  height: 120px;
  border: 1px solid #999;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}
.upload-btn {
  font-size: 30px;
  color: #ccc;
}
.small-img {
  width: 120px;
  height: 120px;
  margin: 10px;
  cursor: pointer;
  position: relative;
  border: 1px solid #eee;
}
.img-delbtn {
  font-size: 18px;
  color: #ccc;
  position: absolute;
  top: 5px;
  right: 5px;
}
.img-delbtn:hover {
  color: red;
}
</style>