From b27571cf78742a5de2e1d43c4af5f8cc436860e2 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期五, 12 四月 2024 15:51:02 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/Editor/index.vue | 96 +++++++++++++++++++++++++++++++++++------------
1 files changed, 71 insertions(+), 25 deletions(-)
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index 8981d76..692d899 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,6 +115,45 @@
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);
@@ -129,6 +161,7 @@
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 +190,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 +201,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 +224,95 @@
</script>
<style>
-.editor, .ql-toolbar {
+.editor,
+.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