From 218480c52639db3e8d93c7c67a564afe283fe39b Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 12 四月 2024 09:30:45 +0800
Subject: [PATCH] fix:修改富文本粘贴图片问题
---
src/components/Editor/index.vue | 322 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 321 insertions(+), 1 deletions(-)
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index 8981d76..ed0c790 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -13,7 +13,327 @@
v-if="this.type == 'url'"
>
</el-upload>
- <div class="editor" ref="editor" :style="styles"></div>
+ <div class="editor" ref="editor" :style="styles"></div><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>
+ <div class="editor" ref="editor" :style="styles" @paste="onPaste($event)"></div>
+ </div>
+</template>
+
+<script>
+import Quill from "quill";
+import "quill/dist/quill.core.css";
+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",
+ props: {
+ /* 缂栬緫鍣ㄧ殑鍐呭 */
+ value: {
+ type: String,
+ default: "",
+ },
+ /* 楂樺害 */
+ height: {
+ type: Number,
+ default: null,
+ },
+ /* 鏈�灏忛珮搴� */
+ minHeight: {
+ type: Number,
+ default: null,
+ },
+ /* 鍙 */
+ readOnly: {
+ type: Boolean,
+ default: false,
+ },
+ // 涓婁紶鏂囦欢澶у皬闄愬埗(MB)
+ fileSize: {
+ type: Number,
+ default: 5,
+ },
+ /* 绫诲瀷锛坆ase64鏍煎紡銆乽rl鏍煎紡锛� */
+ type: {
+ type: String,
+ default: "url",
+ }
+ },
+ data() {
+ return {
+ uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
+ headers: {
+ Authorization: "Bearer " + getToken()
+ },
+ Quill: null,
+ currentValue: "",
+ options: {
+ theme: "snow",
+ bounds: document.body,
+ debug: "warn",
+ modules: {
+ // 宸ュ叿鏍忛厤缃�
+ toolbar: [
+ ["bold", "italic", "underline", "strike"], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾�
+ ["blockquote", "code-block"], // 寮曠敤 浠ｇ爜鍧�
+ [{ list: "ordered" }, { list: "bullet" }], // 鏈夊簭銆佹棤搴忓垪琛�
+ [{ indent: "-1" }, { indent: "+1" }], // 缂╄繘
+ [{ size: ["small", false, "large", "huge"] }], // 瀛椾綋澶у皬
+ [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬
+ [{ color: [] }, { background: [] }], // 瀛椾綋棰滆壊銆佸瓧浣撹儗鏅鑹�
+ [{ align: [] }], // 瀵归綈鏂瑰紡
+ ["clean"], // 娓呴櫎鏂囨湰鏍煎紡
+ ["link", "image", "video"] // 閾炬帴銆佸浘鐗囥�佽棰�
+ ],
+ },
+ placeholder: "璇疯緭鍏ュ唴瀹�",
+ readOnly: this.readOnly,
+ },
+ };
+ },
+ computed: {
+ styles() {
+ let style = {};
+ if (this.minHeight) {
+ style.minHeight = `${this.minHeight}px`;
+ }
+ if (this.height) {
+ style.height = `${this.height}px`;
+ }
+ return style;
+ },
+ },
+ watch: {
+ value: {
+ handler(val) {
+ if (val !== this.currentValue) {
+ this.currentValue = val === null ? "" : val;
+ if (this.Quill) {
+ this.Quill.pasteHTML(this.currentValue);
+ }
+ }
+ },
+ immediate: true,
+ },
+ },
+ mounted() {
+ this.init();
+ },
+ beforeDestroy() {
+ 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);
+ // 濡傛灉璁剧疆浜嗕笂浼犲湴鍧�鍒欒嚜瀹氫箟鍥剧墖涓婁紶浜嬩欢
+ 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 {
+ this.quill.format("image", false);
+ }
+ });
+ }
+ this.Quill.pasteHTML(this.currentValue);
+ this.Quill.on("text-change", (delta, oldDelta, source) => {
+ const html = this.$refs.editor.children[0].innerHTML;
+ const text = this.Quill.getText();
+ const quill = this.Quill;
+ this.currentValue = html;
+ this.$emit("input", html);
+ this.$emit("on-change", { html, text, quill });
+ });
+ this.Quill.on("text-change", (delta, oldDelta, source) => {
+ this.$emit("on-text-change", delta, oldDelta, source);
+ });
+ this.Quill.on("selection-change", (range, oldRange, source) => {
+ this.$emit("on-selection-change", range, oldRange, source);
+ });
+ this.Quill.on("editor-change", (eventName, ...args) => {
+ this.$emit("on-editor-change", eventName, ...args);
+ });
+ },
+ // 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏�
+ handleBeforeUpload(file) {
+ // 鏍℃鏂囦欢澶у皬
+ if (this.fileSize) {
+ const isLt = file.size / 1024 / 1024 < this.fileSize;
+ if (!isLt) {
+ this.$message.error(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${this.fileSize} MB!`);
+ return false;
+ }
+ }
+ return true;
+ },
+ handleUploadSuccess(res, file) {
+ // 鑾峰彇瀵屾枃鏈粍浠跺疄渚�
+ let quill = this.Quill;
+ // 濡傛灉涓婁紶鎴愬姛
+ if (res.code == 200) {
+ // 鑾峰彇鍏夋爣鎵�鍦ㄤ綅缃�
+ let length = quill.getSelection().index;
+ // 鎻掑叆鍥剧墖 res.url涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囧湴鍧�
+ // 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 {
+ this.$message.error("鍥剧墖鎻掑叆澶辫触");
+ }
+ },
+ handleUploadError() {
+ this.$message.error("鍥剧墖鎻掑叆澶辫触");
+ },
+ },
+};
+</script>
+
+<style>
+.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: "绛夊瀛椾綋";
+}
+</style>
+
</div>
</template>
--
Gitblit v1.8.0