proginn-frontend/components/topics/editor.vue

<template>
  <div class="editor">
    <el-input show-word-limit v-model="title" class="title" placeholder="请输入文章标题" :maxlength="64"></el-input>
    <editor placeholder="支持富文本、支持超链接、插入图片、插入视频，最少100字符，最多10000字符" :content="content" @change="handleChange"></editor>
    <h5 class="label">封面图(选填)</h5>

    <div class="uploadInfo">
      <div class="left">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :multiple="false"
          accept="image/png, image/jpeg"
          :before-upload="handleFileChange"
        >
          <i v-if="cover_url" class="el-icon-delete avatar-uploader-icon"
            @click.stop="handleDeleteFile"></i>
          <img v-if="cover_url" :src="cover_url" class="avatar"/>
          <div v-else class="noneImage">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </div>
        </el-upload>
      </div>
      <div class="right">
        <p>建议尺寸: </p>
        <p>180*140 大小在500k以内</p>
      </div>
    </div>

    <h5 class="label">添加到合集(选填)</h5>
    <el-select v-model="collectionId" placeholder="请选择合集" class="class">
      <el-option
        v-for="item in collectionList"
        :key="item.id"
        :label="item.title"
        :value="item.id"
      ></el-option>
    </el-select>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="cover_url" alt />
    </el-dialog>
    <footer>
      <el-button type="primary" @click="publish">发布</el-button>
      <el-button @click="cancel">取消</el-button>
    </footer>
  </div>
</template>

<script>
import editor from "@/components/editor";
export default {
  head() {
    return {
      script: []
    };
  },
  components: {
    editor
  },
  data() {
    return {
      topicId: "", // 编辑
      hashID: null,
      title: "",
      subTitle: "",
      content: "",
      cover_url: "",
      dialogVisible: false,
      disabled: false,
      collectionId: "",
      collectionList: [],
      categoryList: [
        {
          value: "default",
          label: "推荐"
        }
      ],
      fileList: [],
      uploading: false
    };
  },
  computed: {},
  mounted() {
    this.needLogin();
    this.needVerify();
    this.getHejiList()
    if (this.$route.params.id) {
      this.loadData();
    }
  },
  methods: {
    loadData() {
      const data = {
        topicId: this.$route.params.id
      };
      this.$axios
        .$post(`/api/community/topic/get_edit_topic`, data)
        .then(res => {
          console.log(res);
          const topic = res.data;
          if (topic) {
            this.cover_url = topic.cover_url;
            this.topicId = topic.id;
            this.title = topic.title;
            this.subTitle = topic.intro;
            this.content = topic.body;
            this.hashID = topic.hash_id;
            if (this.cover_url) {
              this.fileList.push({
                name: "cover_image",
                url: this.cover_url
              });
            }
          } else {
            this.goHome();
          }
          // TODO go details
        });
    },
    getHejiList() {
      this.$axios.post("/api/jishuquan/get_collections", {
        uid: this.$store.state.userinfo.uid,
        page: 1,
        size: 200
      }).then(res=>{
        if (res.data.status === 1) {
          this.collectionList = res.data.data
        }
      })
    },
    publish() {
      this.needVerify();
      if (!this.title) {
        this.$message.error("请输入文章标题");
        return;
      }
      if (this.title.length < 2) {
        this.$message.error("文章标题不可少于2字符");
        return;
      }
      if (this.title.length > 64) {
        this.$message.error("文章标题不可超过64字符，请删减");
        return;
      }

      if (!this.content) {
        this.$message.error("请输入文章正文");
        return;
      }
      if (this.content.length < 100) {
        this.$message.error("文章正文不可少于100字符");
        return;
      }
      if (this.content.length > 100000) {
        this.$message.error("文章正文不可超过1万字符，请删减");
        return;
      }
      const data = {
        title: this.title,
        intro: this.subTitle,
        body: this.content,
        provider_id: this.collectionId,
        cover_url: this.cover_url
      };
      if (this.topicId) {
        data.topic_id = this.topicId;
        this.$axios
          .$post(`/api/community/topic/update_topic`, data)
          .then(res => {
            console.log(res);
            if (res.status === -99) {
              this.goHome();
            }
            if (res.status === 1) {
              this.$message.success("编辑成功！");
            }
            // TODO go details
            window.location.href = `/p/${this.hashID}.html`;
          });
      } else {
        this.$axios
          .$post(`/api/community/topic/create_topic`, data)
          .then(res => {
            console.log(res);
            if (res.status === -99) {
              this.goHome();
            }
            if (res.status === 1) {
              this.$message.success("发布成功！");
            }
            // TODO go details
            window.location.href = `/p/${res.data.hash_id}.html`;
          });
      }
    },
    cancel() {
      this.$router.back();
    },
    handleChange(val) {
      this.content = val;
    },
    handleDeleteFile() {
      this.cover_url = "";
    },
    handleFileChange(file) {
      console.log(file);
      if (file.size / 1024 > 500) {
        this.$message.error("图片大小不得超过500k，请重新选择");
        return false;
      }
      const formData = new FormData();
      formData.append("target", '{ "type": 3 }');
      formData.append("id", "WU_FILE_0");
      formData.append("name", file.name);
      formData.append("type", file.type);
      formData.append("lastModifiedDate", file.lastModifiedDate);
      formData.append("size", file.size);
      formData.append("file", file);
      this.$axios
        .$post(`/file/proxyUpload`, formData, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(res => {
          this.cover_url = (res.data && res.data.url) || "";
          this.fileList = [
            {
              name: "file.name",
              url: this.cover_url
            }
          ];
        });
    }
  }
};
</script>

<style lang="scss">
.editor {
  position: relative;
  padding: 20px;
  width: 740px;
  background: #fff;
  .title,
  .sub-title {
    .el-input__inner {
      padding: 0;
      border: 0;
      border-radius: 0;
    }
  }
  .title {
    margin: 10px auto 20px;
    font-size: 28px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(29, 42, 58, 1);
    line-height: 40px;
  }
  .sub-title {
    margin-bottom: 28px;
    min-height: 18px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(145, 154, 167, 1);
    line-height: 18px;
    border: 0;
    .el-textarea__inner {
      height: 18px;
      line-height: 18px;
      border: 0;
      padding-left: 0;
    }
  }
  .label {
    margin: 20px auto 10px;
    font-size: 13px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(25, 34, 46, 1);
    line-height: 18px;
  }
  .ql-toolbar {
    border-width: 1px 0 0 0 !important;
  }
  .quill-editor {
    height: 450px;
    border-left: 0 !important;
    border-right: 0 !important;
    font-size: 14px;
    line-height: 25px;
  }
  .ql-snow.ql-toolbar::after {
    display: inline-block;
  }
  .class {
    width: 320px;
  }
  .tags {
    width: 560px;
  }
  footer {
    margin: 40px 0;
    button {
      width: 100px;
      height: 40px;
      border-radius: 0;
    }
  }
  strong {
    font-weight: 800 !important;
  }
  em {
    font-style: italic !important;
  }
}

.uploadInfo {
  display: flex;
  align-items: center;
  .left {
    width: 180px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    background: #fff;
    .el-icon-delete {
      display: none;
    }
    .avatar-uploader .el-upload {
      width: 180px;
      height: 140px;
      border: 1px dashed #dce1e8;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: top left;
      }
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
      .el-icon-delete {
        display: block;
      }
    }
    .avatar-uploader-icon {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 44px;
      color: #dce1e8;;
      width: 180px;
      height: 140px;
      line-height: 140px;
      text-align: center;
    }
    .avatar {
      width: 180px;
      height: 140px;
      display: block;
    }
    .title {
      position: absolute;
      left: 50%;
      bottom: 40px;
      transform: translateX(-50%);
      font-size: 13px;
      font-weight: 500;
      color: #dce1e8;
      line-height: 18px;
      text-decoration: underline;
    }
  }
  .right {
    margin-left: 18px;
    height:34px;
    p {
      font-size:12px;
      font-weight:400;
      color:rgba(145,154,167,1);
      line-height:17px;
    }
  }
}
</style>