测试完成

WXL

2024-07-04 f77e656729c268db01e101033c6df8820365cfd2

 src/views/knowledge/education/compilequer/index.vue

@@ -313,19 +313,6 @@
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24">
            <div style="display: flex; margin-left: 66px; margin-bottom: 10px">
              <div
                v-for="item in variablelist"
                class="tsgname"
                @click="tsgnameto(item)"
              >
                {{ item.variatename }}
              </div>
            </div>
          </el-col></el-row
        >

        <div>
          <el-form
@@ -349,6 +336,16 @@
          </el-form>
        </div>
        <div>
          <el-upload
            class="upload-demo"
            :action="uploadImgUrlword"
            :on-success="uploadEditorSuccessword"
            :on-error="uploadEditorErrorword"
            :before-upload="beforeEditorUploadword"
            :headers="headers"
          >
            <el-button size="small" type="primary">word文件上传</el-button>
          </el-upload>
          <div id="quillEditorQiniu">
            <!-- 基于elementUi的上传组件 el-upload begin-->
            <el-upload
@@ -368,6 +365,9 @@
              v-model="content"
              ref="customQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur"
              @focus="onEditorFocus"
              @change="onEditorChange"
            >
            </quill-editor>
          </div>
@@ -379,6 +379,8 @@

<script>
import { quillEditor } from "vue-quill-editor";
import axios from "axios";

import {
  getheLibraryAssort,
  delheLibraryAssort,
@@ -432,6 +434,7 @@
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      uploadImgUrlword: process.env.VUE_APP_BASE_API + "/common/uploadShow",
      uploadUrlPath: "没有文件上传",
      quillUpdateImg: false,
      fileList: [
@@ -568,8 +571,8 @@
  watch: {
    content(newVal, oldVal) {
      //this.$emit('input', newVal);
      console.log(newVal);
      console.log(oldVal);
      console.log(newVal, "A");
      console.log(oldVal, "B");
    },
  },

@@ -584,6 +587,7 @@
      if (this.id) {
        getlibraryinfo({ id: this.id }).then((res) => {
          this.ruleForm = res.data[0];
          this.content = this.ruleForm.richText;
          this.ruleForm.campus = this.ruleForm.campus.split(",");
          this.dynamicTags = res.data[0].heLibraryTagList.map(
            this.processElement
@@ -637,6 +641,7 @@
      if (this.illnesslistapi.length) {
        deltargetillness(this.illnesslistapi.join(",")).then((res) => {});
      }
      this.ruleForm.richText = this.content;
      compilelibrary(this.ruleForm).then((res) => {
        this.$modal.msgSuccess("编辑成功");
        this.$router.go(-1);
@@ -887,10 +892,22 @@
      //取消上传动画
      this.quillUpdateImg = false;
    },
    // 失去焦点事件
    onEditorBlur(e) {
      console.log("onEditorBlur: ", e);
    },
    // 获得焦点事件
    onEditorFocus(e) {
      console.log("onEditorFocus: ", e);
    },
    // 内容改变事件
    onEditorChange(e) {
      console.log("onEditorChange: ", e);
    },
    // 上传(文件)图片失败
    uploadEditorError(res, file) {
      console.log(res);
      console.log(file);
      console.log(res, "word");
      console.log(file, "word");
      //页面提示
      this.$message.error("上传图片失败");
      //取消上传动画
@@ -899,6 +916,60 @@
    //上传组件返回的结果
    uploadResult: function (res) {
      this.uploadUrlPath = res;
    },
    // 上传(文件)图片失败
    uploadEditorErrorword(res, file) {
      console.log(res);
      console.log(file);
      //页面提示
      this.$message.error("上传图片失败");
      //取消上传动画
      this.quillUpdateImg = false;
    },
    //上传图片之前async
    beforeEditorUploadword(res, file) {
      //显示上传动画
      this.quillUpdateImg = true;
      //  const res1 = await uploadImage()
      // console.log(res1,'=====');
      // this.$emit('before',res, file)
      console.log(res);
      console.log(file);
    },
    // 上传图片成功
    uploadEditorSuccessword(res, file) {
      console.log("上传成功");
      const data = null;
      console.log(res, file, "word");
      axios
        .get("http://localhost:8089/profile/upload/show/测试/测试.html")
        .then((response) => {
          console.log(response.data, "数据"); // 输出获取到的文件内容
          this.content = response.data;
        })
        .catch((error) => {
          console.error("Failed to fetch file:", error);
        });
      console.log(data, "数据");
      //拼接出上传的图片在服务器的完整地址
      let imgUrl = res.url;
      let type = imgUrl.substring(imgUrl.lastIndexOf(".") + 1);
      console.log(type);
      // 获取富文本组件实例
      let quill = this.$refs.customQuillEditor.quill;
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片||视频  res.info为服务器返回的图片地址
      if (type == "mp4" || type == "MP4") {
        window.jsValue = imgUrl;
        quill.insertEmbed(length, "video", imgUrl);
      } else {
        quill.insertEmbed(length, "image", imgUrl);
      }
      // 调整光标到最后
      quill.setSelection(length + 1);
      //取消上传动画
      this.quillUpdateImg = false;
    },
  },
};
@@ -1068,8 +1139,8 @@
}
.editor {
  line-height: normal !important;
  height: 400px;
  margin-bottom: 50px;
  height: 600px;
  margin-bottom: 80px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";