hamster-blog/blog-frontend/src/views/BlogEditView.vue

<script setup lang="ts">
import { onMounted, reactive, ref, shallowRef } from "vue";
import { useRoute } from "vue-router";

import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import type {
  IDomEditor,
  IToolbarConfig,
  IEditorConfig,
} from "@wangeditor/editor";

import { ElMessage } from "element-plus";

import { api } from "@/api";
import type { BlogUpdateRequireVO } from "@/swagger";
import router from "@/router";

const editorRef = shallowRef();
const toolbarConfig: IToolbarConfig = {};
const editorConfig: IEditorConfig = {};

const editBlog = reactive<BlogUpdateRequireVO>({
  title: "",
  content: "",
  tags: [],
});
const tagInput = ref<string>("");
const blogID = parseInt(useRoute().params.id.toString());

onMounted(() => {
  if (blogID) {
    api.BlogController.getBlogInfo(blogID).then((resp) => {
      const vo = resp.data;
      if (vo.code === 200) {
        const blog = vo.content;
        editBlog.title = blog?.title ?? "";
        editBlog.abstracts = blog?.abstracts;
        editBlog.tags = blog?.tags ?? [];
        editBlog.top = blog?.top;
        editBlog.publish = blog?.publish;
        editBlog.content = blog?.content ?? "";
        tags.value = blog?.tags.toString();
      } else {
        ElMessage({
          type: "error",
          message: "加载博文内容失败：" + vo.msg,
        });
        location.pathname = "/";
        console.log("not login!");
      }
    });
  } else {
    ElMessage({
      type: "error",
      message: "加载博文内容失败！",
    });
    location.pathname = "/";
    console.log("not login!");
  }
});

function saveBlog() {
  api.BlogController.updateBlog(editBlog, blogID).then((resp) => {
    const vo = resp.data;
    if (vo.code === 200) {
      ElMessage({
        type: "success",
        message: "更新博文成功！",
      });
      console.log("update blog " + blogID + " success!");
      router.push("/blog/" + blogID + "/read/");
    } else {
      ElMessage({
        type: "error",
        message: "更新博文失败: " + vo.msg,
      });
    }
  });
}

function cancelSave() {
  router.push("/blog/" + blogID + "/read/");
}

function addTag() {
  if (tagInput.value.length === 0) {
    ElMessage({
      type: "warning",
      message: "请输入标签名称！",
    });
    return;
  }
  if (editBlog.tags.includes(tagInput.value)) {
    ElMessage({
      type: "warning",
      message: "该博文已拥有相同的标签名称！",
    });
    return;
  }
  editBlog.tags.push(tagInput.value);
  tagInput.value = "";
}

function removeTag(index: number) {
  editBlog.tags.splice(index, 1);
}

function handleCreated(editor: IDomEditor) {
  editorRef.value = editor; // 记录 editor 实例，重要！
}
</script>

<template>
  <el-container class="edit-container">
    <el-aside class="edit-content-side">
      <div class="edit-content-toolbar">
        <Toolbar
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          mode="default"
        />
      </div>
      <el-scrollbar class="edit-content-scrollbar">
        <Editor
          v-model="editBlog.content"
          :defaultConfig="editorConfig"
          mode="default"
          @onCreated="handleCreated"
        />
      </el-scrollbar>
    </el-aside>
    <el-main class="edit-form-side">
      <el-form :model="editBlog">
        <el-form-item label="博文标题">
          <el-input
            placeholder="博文标题"
            maxlength="128"
            show-word-limit
            v-model="editBlog.title"
          />
        </el-form-item>
        <el-form-item label="博文摘要">
          <el-input
            placeholder="博文摘要"
            maxlength="1024"
            show-word-limit
            type="textarea"
            autosize
            v-model="editBlog.abstracts"
          />
        </el-form-item>
        <el-form-item label="标签" style="display: flex">
          <el-tag
            style="margin-left: 5px"
            v-for="(tag, index) in editBlog.tags"
            :key="index"
            closable
            size="large"
            @close="removeTag(index)"
          >
            {{ tag }}
          </el-tag>

          <div style="margin-left: 5px">
            <el-input
              style="margin: 0 5px 0 0; width: 100px"
              v-model="tagInput"
            />
            <el-button type="primary" @click="addTag">添加</el-button>
          </div>
        </el-form-item>
        <el-form-item label="是否置顶">
          <el-switch v-model="editBlog.top" />
        </el-form-item>
        <el-form-item label="是否公开">
          <el-switch v-model="editBlog.publish" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveBlog">保存</el-button>
          <el-button @click="cancelSave">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<style scoped>
.edit-container {
  height: 100%;
  padding: 0 20px 0 20px;
  margin: 0;
}

.edit-content-side {
  height: 100%;
  width: 61.8%;
  display: flex;
  flex-direction: column;
  border-style: solid;
  border-width: 0 1px 0 1px;
  border-color: #ccc;
}

.edit-content-toolbar {
  border-bottom: 1px solid #ccc;
}
</style>