富文本上传

<!-- 信息入库-->
<template>
  <div class="app-container">
    <!-- 手动添加文件对话框 -->
    <div style="display: flex">
      <div style="border: 1px solid #ccc" class="videoFather">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          class="editorC"
          style="height: 380px; overflow-y: hidden"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
        />
      </div>
      <div style="margin-top: 20px">
        <el-button @click="nextStep">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";

// 引入 VueOffice 组件
import "@vue-office/excel/lib/index.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { importRichTextInfo } from "@/api/informationManagement.js";
export default {
  components: {
    Editor,
    Toolbar,
  },
  props: {},
  data() {
    return {
      // 手动导入弹框左侧高亮
      activeStep: 0,
      // 文件名称
      file: "",
      editor: null,
      html: "",
      toolbarConfig: {
        excludeKeys: ["fullScreen"],
      },
      editorConfig: { placeholder: "请输入内容...", MENU_CONF: {} },
      mode: "default",
    };
  },
  computed: {},
  watch: {},
  methods: {
    async nextStep() {
      console.log(this.form);
      console.log(this.html);
      console.log(this.mode);
      const newData = {
        // encoding: this.form.digitalCoding,
        belongProject: 1,
        productType: 2,
        category: 3,
        import_date: 4,
        filename: 5,
        file: this.html,
      };
      let result = await importRichTextInfo(newData);
      const { code, message, status } = result;
      if (code == 200) {
        this.activeStep++;
      }
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    /*
     *@Author: qs
     *@Date: 2024-06-17 16:16:32
     *@Description: 富文本编辑器初始化
     */
    editorInit() {
      console.log(1111111111);
      this.editorConfig.MENU_CONF["uploadImage"] = {
        server: "http://localhost:8080/test",
        // server: '/api/upload-img-10s', // test timeout
        // server: '/api/upload-img-failed', // test failed
        // server: '/api/xxx', // test 404

        timeout: 5 * 1000, // 5s

        fieldName: "custom-fileName",
        meta: { token: "xxx", a: 100 },
        metaWithUrl: true, // join params to url
        headers: {
          Accept: "application/json, text/plain, */*",
          token: localStorage.getItem("token") || "",
        },
        // headers: { token: localStorage.getItem("token") },
        maxFileSize: 10 * 1024 * 1024, // 10M

        base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb

        onBeforeUpload(file) {
          console.log("onBeforeUpload", file);

          return file; // will upload this file
          // return false // prevent upload
        },
        onProgress(progress) {
          console.log("onProgress", progress);
        },
        onSuccess(file, res) {
          console.log("onSuccess", file, res);
        },
        onFailed(file, res) {
          alert(res.message);
          console.log("onFailed", file, res);
        },
        onError(file, err, res) {
          alert(err.message);
          console.error("onError", file, err, res);
        },
      };
      this.editorConfig.MENU_CONF["uploadVideo"] = {
        server: "http://localhost:8080/test",
        // server: '/api/upload-img-failed', // test failed
        // server: '/api/xxx', // test 404

        timeout: 20 * 1000, // 5s

        fieldName: "custom-fileName",
        meta: { token: "xxx", a: 100 },
        metaWithUrl: true, // join params to url
        headers: {
          Accept: "application/json, text/plain, */*",
          token: localStorage.getItem("token") || "",
        },

        maxFileSize: 90 * 1024 * 1024, // 90M

        onBeforeUpload(file) {
          console.log("onBeforeUpload", file);

          return file; // will upload this file
          // return false // prevent upload
        },
        onProgress(progress) {
          console.log("onProgress", progress);
        },
        onSuccess(file, res) {
          console.log("onSuccess", file, res);
        },
        onFailed(file, res) {
          alert(res.message);
          console.log("onFailed", file, res);
        },
        onError(file, err, res) {
          alert(err.message);
          console.error("onError", file, err, res);
        },
      };
    },
  },

  created() {},
  mounted() {
    this.editorInit();
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>