update

src/components/TinyMCE/index.vue

@@ -1,8 +1,10 @@
 <script setup>
-import {ref} from "vue";
+import {ref, watch, computed, nextTick} from "vue";
 import Editor from "@tinymce/tinymce-vue";
 import {VITE_TINYMCE_KEY} from "../../utils/index.js";
 
+const content = defineModel('content');
+const EditorIF = ref(true);
 const loading = ref(true);
 const {skin} = defineProps({
     skin: {
@@ -15,7 +17,7 @@ const onEditorReady = () => {
     loading.value = false;
 }
 
-const INIT = ref({
+const INIT = computed(() => ({
     language: 'zh_CN',
     skin: skin,
     content_css: skin === 'fluent' ? 'fluent' : null,
@@ -23,18 +25,39 @@ const INIT = ref({
     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,
-})
+    images_upload_url: 'http://your-api/upload',
+    images_upload_credentials: true,
+    images_upload_handler: (blobInfo, success, failure) => {
+        console.log(blobInfo, success, failure);
+    },
+    file_picker_types: 'image',
+    images_reuse_filename: true,
+    images_upload_types: 'jpeg,jpg,png,gif',
+}));
+
+watch(
+    () => skin,
+    () => {
+        EditorIF.value = false;
+        nextTick(() => {
+            EditorIF.value = true;
+        })
+    },
+    {deep: true}
+)
 </script>
 
 <template>
-    <div id="TinyMCE" class="h-auto w-full">
+    <div id="TinyMCE" class="w-full h-full min-h-[500px]">
         <a-spin
             dot
             :size="20"
-            class="w-full h-auto"
+            class="w-full h-full min-h-[500px]"
             :loading="loading"
             tip="编辑器加载中">
             <Editor
+                v-model="content"
+                v-if="EditorIF"
                 :init="INIT"
                 :api-key="VITE_TINYMCE_KEY()"
                 @on-ready="onEditorReady">
@@ -47,7 +70,7 @@ const INIT = ref({
 #TinyMCE {
     :deep(.tox) {
         width: 100%;
-        height: 100%;
+        height: 100% !important;
         min-height: 500px !important;
     }
 }

src/components/TinyMCE/modal.vue

@@ -2,6 +2,7 @@
 import TinyMCE from "./index.vue";
 import {ref} from "vue";
 
+const content = defineModel('content');
 const visible = ref(false);
 const fullscreen = ref(false);
 </script>
@@ -31,7 +32,10 @@ const fullscreen = ref(false);
                 </a-link>
             </div>
         </template>
-        <TinyMCE :skin="fullscreen ? 'fluent' : 'borderless'"></TinyMCE>
+        <TinyMCE
+            v-model:content="content"
+            :skin="fullscreen ? 'fluent' : 'borderless'">
+        </TinyMCE>
     </a-modal>
 </template>
 

src/pages/manage/pages/manage-expert-management/components/RichTextContentLibrary.vue

@@ -62,9 +62,9 @@ const {loading, pagination, initFetchData} = useTableQuery({
         <template v-slot:preview>
             <a-link :hoverable="false"><icon-eye />预览</a-link>
         </template>
-        <template v-slot:action>
+        <template v-slot:action="{record}">
             <div class="flex gap-[20px]">
-                <TinyMCEModal></TinyMCEModal>
+                <TinyMCEModal v-model:content="record.content"></TinyMCEModal>
                 <a-link :hoverable="false" status="danger">删除</a-link>
             </div>
         </template>