From e10f112fa075441b1799fb6c0b61f95ece70d9c7 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期二, 15 八月 2023 13:53:34 +0800 Subject: [PATCH] fix 修复 使用 localStorage 返回值为null问题 --- src/components/Editor/index.vue | 112 +++++++++++++++++++++++++++---------------------------- 1 files changed, 55 insertions(+), 57 deletions(-) diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue index b7c18c3..6aef16b 100644 --- a/src/components/Editor/index.vue +++ b/src/components/Editor/index.vue @@ -1,46 +1,57 @@ +<template> + <div> + <el-upload + :action="upload.url" + :before-upload="handleBeforeUpload" + :on-success="handleUploadSuccess" + :on-error="handleUploadError" + class="editor-img-uploader" + name="file" + :show-file-list="false" + :headers="upload.headers" + style="display: none" + v-if="type === 'url'" + > + </el-upload> + <div class="editor"> + <quill-editor + ref="myQuillEditor" + v-model:content="content" + contentType="html" + @textChange="(e: any) => $emit('update:modelValue', content)" + :options="options" + :style="styles" + /> + </div> + </div> +</template> + <script setup lang="ts"> import { QuillEditor, Quill } from '@vueup/vue-quill'; import '@vueup/vue-quill/dist/vue-quill.snow.css'; -import { getToken } from "@/utils/auth"; -import { ComponentInternalInstance } from "vue"; +import { propTypes } from '@/utils/propTypes'; +import { globalHeaders } from "@/utils/request"; const props = defineProps({ /* 缂栬緫鍣ㄧ殑鍐呭 */ - modelValue: { - type: String, - }, + modelValue: propTypes.string, /* 楂樺害 */ - height: { - type: Number, - default: null, - }, + height: propTypes.number.def(400), /* 鏈�灏忛珮搴� */ - minHeight: { - type: Number, - default: null, - }, + minHeight: propTypes.number.def(400), /* 鍙 */ - readOnly: { - type: Boolean, - default: false, - }, + readOnly: propTypes.bool.def(false), /* 涓婁紶鏂囦欢澶у皬闄愬埗(MB) */ - fileSize: { - type: Number, - default: 5, - }, + fileSize: propTypes.number.def(5), /* 绫诲瀷锛坆ase64鏍煎紡銆乽rl鏍煎紡锛� */ - type: { - type: String, - default: "url", - } + type: propTypes.string.def('url') }); const { proxy } = getCurrentInstance() as ComponentInternalInstance; const upload = reactive<UploadOption>({ - headers: { Authorization: "Bearer " + getToken() }, - url: import.meta.env.VITE_APP_BASE_API + '/system/oss/upload' + headers: globalHeaders(), + url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload' }) const myQuillEditor = ref(); @@ -54,7 +65,7 @@ container: [ ["bold", "italic", "underline", "strike"], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾� ["blockquote", "code-block"], // 寮曠敤 浠g爜鍧� - [{ list: "ordered" }, { list: "bullet"} ], // 鏈夊簭銆佹棤搴忓垪琛� + [{ list: "ordered" }, { list: "bullet" }], // 鏈夊簭銆佹棤搴忓垪琛� [{ indent: "-1" }, { indent: "+1" }], // 缂╄繘 [{ size: ["small", false, "large", "huge"] }], // 瀛椾綋澶у皬 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬 @@ -137,45 +148,21 @@ } </script> -<template> - <div> - <el-upload - :action="upload.url" - :before-upload="handleBeforeUpload" - :on-success="handleUploadSuccess" - :on-error="handleUploadError" - class="editor-img-uploader" - name="file" - :show-file-list="false" - :headers="upload.headers" - style="display: none" - v-if="type === 'url'" - > - </el-upload> - <div class="editor"> - <quill-editor - ref="myQuillEditor" - v-model:content="content" - contentType="html" - @textChange="(e: any) => $emit('update:modelValue', content)" - :options="options" - :style="styles" - /> - </div> - </div> -</template> - <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: 0; content: "淇濆瓨"; @@ -190,14 +177,17 @@ .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"; @@ -207,26 +197,32 @@ .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"; @@ -236,10 +232,12 @@ .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.9.3