From 37d2ba3d2c1902202c8c7ee9485267b5a1945742 Mon Sep 17 00:00:00 2001
From: WXL <1785969728@qq.com>
Date: 星期三, 11 六月 2025 10:26:36 +0800
Subject: [PATCH] 测试完成
---
src/views/knowledge/education/compilequer/index.vue | 268 +++++++++++++++++++++++++++--------------------------
1 files changed, 135 insertions(+), 133 deletions(-)
diff --git a/src/views/knowledge/education/compilequer/index.vue b/src/views/knowledge/education/compilequer/index.vue
index be12c5b..1060bfa 100644
--- a/src/views/knowledge/education/compilequer/index.vue
+++ b/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>
--
Gitblit v1.9.3