update

src/components/TinyMCE/index.vue

@@ -0,0 +1,54 @@
+<script setup>
+import {ref} from "vue";
+import Editor from "@tinymce/tinymce-vue";
+import {VITE_TINYMCE_KEY} from "../../utils/index.js";
+
+const loading = ref(true);
+const {skin} = defineProps({
+    skin: {
+        type: String,
+        default: 'borderless', // 'fluent'
+    }
+});
+
+const onEditorReady = () => {
+    loading.value = false;
+}
+
+const INIT = ref({
+    language: 'zh_CN',
+    skin: skin,
+    content_css: skin === 'fluent' ? 'fluent' : null,
+    toolbar_mode: skin === 'fluent' ? 'floating' : null,
+    plugins: 'advlist anchor autolink charmap code codesample directionality help image editimage insertdatetime link lists media nonbreaking pagebreak preview searchreplace table tableofcontents visualblocks visualchars wordcount',
+    toolbar: 'undo redo | blocks | bold italic strikethrough forecolor backcolor blockquote | link image media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
+    init_instance_callback: onEditorReady,
+})
+</script>
+
+<template>
+    <div id="TinyMCE" class="h-auto w-full">
+        <a-spin
+            dot
+            :size="20"
+            class="w-full h-auto"
+            :loading="loading"
+            tip="编辑器加载中">
+            <Editor
+                :init="INIT"
+                :api-key="VITE_TINYMCE_KEY()"
+                @on-ready="onEditorReady">
+            </Editor>
+        </a-spin>
+    </div>
+</template>
+
+<style scoped lang="scss">
+#TinyMCE {
+    :deep(.tox) {
+        width: 100%;
+        height: 100%;
+        min-height: 500px !important;
+    }
+}
+</style>

src/components/TinyMCE/modal.vue

@@ -0,0 +1,47 @@
+<script setup>
+import TinyMCE from "./index.vue";
+import {ref} from "vue";
+
+const visible = ref(false);
+const fullscreen = ref(false);
+</script>
+
+<template>
+    <a-link v-if="!$slots.default" :hoverable="false" @click="visible=true">编辑</a-link>
+    <div v-else><slot></slot></div>
+
+    <a-modal
+        id="TinyMCEModal"
+        :mask-closable="false"
+        :unmount-on-close="true"
+        :fullscreen="fullscreen"
+        width="800px"
+        :draggable="true"
+        title-align="start"
+        title="编辑"
+        v-model:visible="visible">
+        <template #title>
+            <div class="flex justify-between w-full pr-[30px]">
+                <div>
+                    编辑
+                </div>
+                <a-link @click="fullscreen = !fullscreen">
+                    <icon-fullscreen v-if="!fullscreen" />
+                    <icon-fullscreen-exit v-else />
+                </a-link>
+            </div>
+        </template>
+        <TinyMCE :skin="fullscreen ? 'fluent' : 'borderless'"></TinyMCE>
+    </a-modal>
+</template>
+
+<style scoped lang="scss">
+</style>
+
+<style lang="scss">
+#TinyMCEModal {
+    .arco-modal-body {
+        @apply p-0 h-full min-h-[500px];
+    }
+}
+</style>