From a831d0eb9bf1c5ed4f1fc0dbe72c48140a2f0250 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 12 四月 2024 09:51:50 +0800
Subject: [PATCH] fix:修改富文本错误
---
src/components/Editor/index.vue | 274 ------------------------------------------------------
1 files changed, 0 insertions(+), 274 deletions(-)
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index ed0c790..692d899 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -1,20 +1,5 @@
<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"></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'">
@@ -328,265 +313,6 @@
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>
-
-<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";
-
-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: {
- 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) => {
- 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) {
- 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;
- if (!isLt) {
- this.$message.error(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${this.fileSize} MB!`);
- return false;
- }
- }
- return true;
- },
- handleUploadSuccess(res, file) {
- // 濡傛灉涓婁紶鎴愬姛
- 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.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: "绛夊瀛椾綋";
--
Gitblit v1.8.0