| | |
| | | |
| | | <div class="editor-wrap" v-loading="loading"> |
| | | <Toolbar |
| | | :key="`toolbar-${activeTab}`" |
| | | class="w-toolbar" |
| | | :editor="editorRef" |
| | | :default-config="toolbarConfig" |
| | | mode="default" |
| | | /> |
| | | <Editor |
| | | :key="`editor-${activeTab}`" |
| | | v-model="currentHtml" |
| | | class="w-editor" |
| | | :default-config="editorConfig" |
| | |
| | | <script setup lang="ts"> |
| | | import "@wangeditor/editor/dist/css/style.css"; |
| | | import { Editor, Toolbar } from "@wangeditor/editor-for-vue"; |
| | | import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, ref } from "vue"; |
| | | import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, ref, watch } from "vue"; |
| | | import { ElMessage } from "element-plus"; |
| | | import http from "../api/http"; |
| | | import type { IEditorConfig } from "@wangeditor/editor"; |
| | | import { normalizeFormData } from "../utils/formHelper"; |
| | | |
| | | type TabKey = "ABOUT" | "NOTICE" | "FLOW"; |
| | | |
| | |
| | | excludeKeys: ["group-image", "uploadImage", "insertImage", "group-video", "uploadVideo", "insertVideo"], |
| | | }; |
| | | const editorConfig: Partial<IEditorConfig> = { |
| | | placeholder: "请输入内容...", |
| | | placeholder: "请输入内容", |
| | | autoFocus: false, |
| | | MENU_CONF: { |
| | | uploadImage: { |
| | |
| | | editorRef.value = editor as never; |
| | | } |
| | | |
| | | watch(activeTab, async () => { |
| | | editorRef.value = undefined; |
| | | await nextTick(); |
| | | }); |
| | | |
| | | async function load() { |
| | | loading.value = true; |
| | | try { |
| | |
| | | async function save() { |
| | | saving.value = true; |
| | | try { |
| | | await http.put("/config/content-settings", { |
| | | const payload = normalizeFormData({ |
| | | aboutUsHtml: form.value.aboutUsHtml, |
| | | parkNoticeHtml: form.value.parkNoticeHtml, |
| | | parkFlowHtml: form.value.parkFlowHtml, |
| | | aboutUsEnabled: form.value.aboutUsEnabled, |
| | | }); |
| | | await http.put("/config/content-settings", payload); |
| | | await load(); |
| | | ElMessage.success("已保存"); |
| | | } catch (e: unknown) { |
| | | ElMessage.error(e instanceof Error ? e.message : "保存失败"); |