From 7844a3c7e60f92a7e011b3d9f9f14cd27e342343 Mon Sep 17 00:00:00 2001
From: tyler <1475946812@qq.com>
Date: Tue, 14 Oct 2025 22:48:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BD=BF=E7=94=A8tiny?=
 =?UTF-8?q?mce=E8=8F=9C=E5=8D=95=E6=A0=8F=E6=8E=A7=E4=BB=B6=EF=BC=88?=
 =?UTF-8?q?=E6=8F=92=E5=85=A5-=E5=9B=BE=E7=89=87=EF=BC=89=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E6=AD=A3=E7=A1=AE=E9=99=84=E4=B8=8Adata-oss-id?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/tinymce/src/editor.vue     | 32 +++++++++++++------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/apps/web-antd/src/components/tinymce/src/editor.vue b/apps/web-antd/src/components/tinymce/src/editor.vue
index 9519dd0f..21886452 100644
--- a/apps/web-antd/src/components/tinymce/src/editor.vue
+++ b/apps/web-antd/src/components/tinymce/src/editor.vue
@@ -58,6 +58,9 @@ const content = defineModel<string>('modelValue', {
 
 const editorRef = shallowRef<EditorType | null>(null);
 
+// 存储上传图片的 url -> ossId 映射，用于后续附加 data-oss-id
+const pendingImageMap = new Map<string, string>();
+
 const { isDark, locale } = usePreferences();
 const skinName = computed(() => {
   return isDark.value ? 'oxide-dark' : 'oxide';
@@ -151,16 +154,9 @@ const initOptions = computed((): InitOptions => {
           .then((response) => {
             const { url, ossId } = response as unknown as UploadResult;
             console.log('tinymce上传图片:', url);
+            // 将 url -> ossId 映射存储起来，等待图片插入后再附加
+            pendingImageMap.set(url, ossId);
             resolve(url);
-            // 放在宏队列才能获取
-            setTimeout(() => {
-              const imgDom = editorRef.value?.dom.select(`img[src="${url}"]`);
-              if (imgDom) {
-                editorRef.value?.dom.setAttrib(imgDom, 'data-oss-id', ossId);
-              } else {
-                console.warn('无法获取图片dom, 存储数据可能会出现问题');
-              }
-            });
           })
           .catch((error) => {
             console.error('tinymce上传图片失败:', error);
@@ -175,6 +171,24 @@ const initOptions = computed((): InitOptions => {
         emit('mounted');
         loading.value = false;
       });
+
+      // 监听内容变化，处理待附加 data-oss-id 的图片
+      editor.on('NodeChange', () => {
+        if (pendingImageMap.size === 0) return;
+        pendingImageMap.forEach((ossId, url) => {
+          const imgDoms = editor.dom.select(`img[src="${url}"]`);
+          if (imgDoms && imgDoms.length > 0) {
+            imgDoms.forEach((imgDom) => {
+              // 只处理还没有 data-oss-id 属性的图片
+              if (!editor.dom.getAttrib(imgDom, 'data-oss-id')) {
+                editor.dom.setAttrib(imgDom, 'data-oss-id', ossId);
+                console.log('已附加 data-oss-id:', url, ossId);
+              }
+            });
+            pendingImageMap.delete(url);
+          }
+        });
+      });
     },
   };
 });