From ea91e87eae0cc1c07f3ecf7eec66806ce77fc50d Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期五, 17 十月 2025 13:39:05 +0800
Subject: [PATCH] 首页问题
---
src/components/Editor/index.vue | 123 ++++++++++++++++++++++++++++++++--------
1 files changed, 98 insertions(+), 25 deletions(-)
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index 8981d76..913999c 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -1,19 +1,10 @@
<template>
<div>
- <el-upload
- :action="uploadUrl"
- :before-upload="handleBeforeUpload"
- :on-success="handleUploadSuccess"
- :on-error="handleUploadError"
- name="file"
- :show-file-list="false"
- :headers="headers"
- style="display: none"
- ref="upload"
- v-if="this.type == 'url'"
- >
+ <el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess"
+ :on-error="handleUploadError" name="file" :show-file-list="false" :headers="headers" style="display: none"
+ ref="upload" v-if="this.type == 'url'">
</el-upload>
- <div class="editor" ref="editor" :style="styles"></div>
+ <div class="editor" ref="editor" :style="styles" @paste="onPaste($event)"></div>
</div>
</template>
@@ -23,6 +14,8 @@
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getToken } from "@/utils/auth";
+import request from '@/utils/request';
+
export default {
name: "Editor",
@@ -47,7 +40,7 @@
type: Boolean,
default: false,
},
- /* 涓婁紶鏂囦欢澶у皬闄愬埗(MB) */
+ // 涓婁紶鏂囦欢澶у皬闄愬埗(MB)
fileSize: {
type: Number,
default: 5,
@@ -122,13 +115,64 @@
this.Quill = null;
},
methods: {
+ /**鐩戝惉瀵屾枃鏈紪杈戝櫒鐨勭矘璐翠簨浠� 閽堝鍥剧墖杩涜鎿嶄綔 */
+ onPaste(evt) {
+ // 鑾峰彇瑙ｆ瀽 绮樿创鐨勫唴瀹�
+ //鍏堝垽鏂矘璐寸殑鍐呭鏄惁鏄浘鐗�
+ if (
+ evt.clipboardData &&
+ evt.clipboardData.files &&
+ evt.clipboardData.files.length
+ ) {
+ evt.preventDefault();
+ [].forEach.call(evt.clipboardData.files, (file) => {
+ if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+ return;
+ }
+ const formData = new FormData();
+ formData.append("file", file);
+ //甯﹁姹傚ご杩囬獙璇�
+ const config = {
+ headers: {
+ "Authorization": "Bearer " + getToken()
+ }
+ };
+ request.post("/common/upload", formData, config).then(
+ res => {
+ if (res.code == 200) {
+ let length = this.Quill.getSelection().index; //鍏夋爣浣嶇疆
+ // 鎻掑叆鍥剧墖鍦板潃
+ this.Quill.insertEmbed(length, "image", 'https://s.rongeying.cn/' + res.fileName);
+ // 鍏夋爣鍚庣Щ涓�浣�
+ this.Quill.setSelection(length + 1);
+ } else {
+ this.$message.error("鍥剧墖鎻掑叆澶辫触");
+ }
+ })
+ });
+ }
+
+ },
+
init() {
const editor = this.$refs.editor;
this.Quill = new Quill(editor, this.options);
+ // 鏂板锛氱紪杈戝尯鍩熺偣鍑昏仛鐒﹂�昏緫
+ const qlEditor = editor.querySelector('.ql-editor');
+ if (qlEditor && !this.readOnly) {
+ qlEditor.addEventListener('click', () => {
+ this.Quill.focus(); // 鐐瑰嚮鏃跺己鍒惰仛鐒�
+ });
+ if (!this.currentValue) {
+ qlEditor.classList.add('ql-blank'); // 绌哄唴瀹规椂鏄剧ず鍗犱綅绗�
+ }
+ }
+
// 濡傛灉璁剧疆浜嗕笂浼犲湴鍧�鍒欒嚜瀹氫箟鍥剧墖涓婁紶浜嬩欢
if (this.type == 'url') {
let toolbar = this.Quill.getModule("toolbar");
toolbar.addHandler("image", (value) => {
+ this.uploadType = "image";
if (value) {
this.$refs.upload.$children[0].$refs.input.click();
} else {
@@ -157,13 +201,6 @@
},
// 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏�
handleBeforeUpload(file) {
- const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
- const isJPG = type.includes(file.type);
- // 妫�楠屾枃浠舵牸寮�
- if (!isJPG) {
- this.$message.error(`鍥剧墖鏍煎紡閿欒!`);
- return false;
- }
// 鏍℃鏂囦欢澶у皬
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
@@ -175,14 +212,15 @@
return true;
},
handleUploadSuccess(res, file) {
+ // 鑾峰彇瀵屾枃鏈粍浠跺疄渚�
+ let quill = this.Quill;
// 濡傛灉涓婁紶鎴愬姛
if (res.code == 200) {
- // 鑾峰彇瀵屾枃鏈粍浠跺疄渚�
- let quill = this.Quill;
// 鑾峰彇鍏夋爣鎵�鍦ㄤ綅缃�
let length = quill.getSelection().index;
// 鎻掑叆鍥剧墖 res.url涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囧湴鍧�
- quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
+ // quill.insertEmbed(length, "image", 'https://rongeying.cn/ronge/' + res.fileName);
+ quill.insertEmbed(length, "image", 'https://s.rongeying.cn/' + res.fileName);
// 璋冩暣鍏夋爣鍒版渶鍚�
quill.setSelection(length + 1);
} else {
@@ -197,76 +235,111 @@
</script>
<style>
-.editor, .ql-toolbar {
+.editor {
+ position: relative;
+ line-height: normal !important;
+}
+.ql-editor {
+ min-height: inherit !important; /* 缁ф壙鐖跺鍣ㄧ殑min-height */
+ height: 100% !important; /* 鍗犳弧鐖跺鍣ㄩ珮搴� */
+ cursor: text; /* 鏄剧ず鏂囨湰鍏夋爣锛屾彁绀哄彲鐐瑰嚮 */
+ padding: 12px 15px; /* 鎵╁ぇ鐐瑰嚮鑼冨洿 */
+ box-sizing: border-box; /* 鍐呰竟璺濅笉瓒呭嚭瀹瑰櫒 */
+}
+.ql-editor.ql-blank::before {
+ content: attr(data-placeholder);
+ color: rgba(0, 0, 0, 0.3);
+ font-style: italic;
+ pointer-events: none; /* 涓嶅奖鍝嶇偣鍑讳簨浠� */
+}
+.ql-toolbar {
white-space: pre-wrap !important;
line-height: normal !important;
}
+
.quill-img {
display: none;
}
+
.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: "绛夊瀛椾綋";
--
Gitblit v1.8.0