测试完成

WXL

3 天以前 37d2ba3d2c1902202c8c7ee9485267b5a1945742

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

@@ -24,6 +24,7 @@
      <!-- 基本信息 -->
      <div v-if="Editprogress == 1">
        <div class="leftvlue-jbxx">基本信息</div>
        <el-divider></el-divider>
        <el-form
          :model="ruleForm"
          :rules="rules"
@@ -258,6 +259,18 @@
          <el-col :span="4">
            <div class="leftvlue-jbxx">宣教内容</div>
          </el-col>
          <el-col :offset="16" :span="4">
            <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>
          </el-col>
        </el-row>

        <div>
@@ -268,7 +281,7 @@
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row :gutter="20">
            <!-- <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="资料形式" prop="region">
                  <el-select
@@ -285,40 +298,14 @@
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <div>
                  <el-button @click="laststep('ruleForm')">上一步</el-button>
                  <el-button
                    type="success"
                    @click="Departmenttreatment('ruleForm')"
                    >保存</el-button
                  >
                  <el-button
                    type="warning"
                    @click="Departmenttreatment('ruleForm')"
                    >另存新版本</el-button
                  >
                  <el-button type="info" @click="closeFm('ruleForm')"
                    >关闭</el-button
                  >
                </div>
              </el-col>
            </el-row>
              <el-col :span="12"> -->

            <!-- </el-col>
            </el-row> -->
          </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>
          <div id="quillEditorQiniu">
            <!-- 基于elementUi的上传组件 el-upload begin-->
            <el-upload
              class="avatar-uploader"
              :action="uploadImgUrl"
@@ -330,7 +317,6 @@
              :headers="headers"
            >
            </el-upload>
            <!-- 基于elementUi的上传组件 el-upload end-->
            <quill-editor
              class="editor"
              v-model="content"
@@ -342,6 +328,32 @@
            >
            </quill-editor>
          </div>
        </div> -->
        <!-- 新组件 -->
        <div style="border: 1px solid #ccc; margin: 10px">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="modes"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="content"
            :defaultConfig="editorConfig"
            :mode="modes"
            @onCreated="onCreated"
          />
        </div>
        <div>
          <el-button @click="laststep('ruleForm')">上一步</el-button>
          <el-button type="success" @click="Departmenttreatment('ruleForm')"
            >保存</el-button
          >
          <el-button type="warning" @click="Departmenttreatment('ruleForm')"
            >另存新版本</el-button
          >
          <el-button type="info" @click="closeFm('ruleForm')">关闭</el-button>
        </div>
      </div>
    </div>
@@ -358,6 +370,7 @@

<script>
import { quillEditor } from "vue-quill-editor";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import axios from "axios";

import {
@@ -411,9 +424,80 @@

export default {
  name: "aEducationinfo",
  components: { OptionalForm },
  components: { OptionalForm, Editor, Toolbar },
  data() {
    return {
      editor: null,
      content: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        menus: [
          "head",
          "bold",
          "italic",
          "underline",
          "image",
          "link",
          "list",
          "undo",
          "redo",
          "file", // 添加自定义文件上传菜单
        ],
        uploadImgServer: process.env.VUE_APP_BASE_API + "/common/uploadSort", // 图片上传接口
        uploadImgHeaders: {
          Authorization: "Bearer " + getToken(),
        }, // 自定义上传的 headers
        uploadImgParams: { key: "value" }, // 自定义上传的参数
        uploadImgMaxSize: 2 * 1024 * 1024, // 图片最大大小，单位 Byte
        uploadImgMaxLength: 1, // 一次最多上传图片数量
        uploadImgTimeout: 3 * 60 * 1000, // 超时时间，单位 ms
        uploadImgHooks: {
          customInsert: (insertImgFn, result) => {
            const url = result.url; // 获取图片地址
            insertImgFn(url); // 插入图片
          },
        },
        customMenus: {
          file: {
            tip: "上传文件",
            click: (editor) => {
              const input = document.createElement("input");
              input.type = "file";
              input.accept =
                "application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"; // 支持的文件类型
              input.onchange = (e) => {
                const file = e.target.files[0];
                if (!file) return;
                const formData = new FormData();
                formData.append("file", file);

                // 确保 process.env.VUE_APP_BASE_API 是正确的
                const uploadUrl =
                  process.env.VUE_APP_BASE_API + "/common/uploadSort";
                axios
                  .post(uploadUrl, formData, {
                    headers: {
                      Authorization: "Bearer " + getToken(),
                    },
                  })
                  .then((res) => {
                    const url = res.data.url; // 获取文件地址
                    // 插入文件链接作为普通文本
                    editor.txt.append(url + " ");
                    // 或者插入文件链接作为超链接
                    // editor.cmd.do('insertLink', { name: '文件链接', url: url });
                  })
                  .catch((err) => {
                    console.error("文件上传失败", err);
                  });
              };
              input.click();
            },
          },
        },
      },
      modes: "default", // or 'simple'
      headers: {
        Authorization: "Bearer " + getToken(),
      },
@@ -577,8 +661,17 @@
      console.log(oldVal, "B");
    },
  },

  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal()，否则会报错
    },

    // ---------------------------------
    processElement(element) {
      return { ...element, isoperation: null };
    },
@@ -943,7 +1036,7 @@
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片||视频  res.info为服务器返回的图片地址
      if (type == "mp4" || type == "MP4"|| type == "avi"|| type == "AVI") {
      if (type == "mp4" || type == "MP4" || type == "avi" || type == "AVI") {
        window.jsValue = imgUrl;
        quill.insertEmbed(length, "video", imgUrl);
      } else {
@@ -1034,12 +1127,9 @@
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style src="@/assets/styles/global.css"></style>
<style lang="scss" scoped>
.Questionnairemanagement {
  // display: flex;
}

.sidecolumn {
  // width: 300px;
  // min-height: 100vh;
@@ -1070,8 +1160,10 @@
  }

  .leftvlue-jbxx {
    margin-bottom: 50px;
    font-size: 20px;
    font-size: 24px;
    height: 30px;
    border-left: 3px solid #41a1be;
    padding-left: 3px;

    span {
      position: absolute;
@@ -1225,95 +1317,5 @@
  span {
    font-size: 24px;
  }
}

.editor {
  line-height: normal !important;
  height: 600px;
  margin-bottom: 80px;
}

.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>