From 59874528cc1ba8aa0076e703506c557dd515b644 Mon Sep 17 00:00:00 2001
From: 2betop <2698393+2betop@users.noreply.github.com>
Date: Fri, 29 Nov 2024 10:14:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20tinymce=20=E8=A2=AB?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E5=90=8E=E4=B8=8D=E5=8F=AF=E7=94=A8=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/amis-ui/src/components/Tinymce.tsx | 37 ++++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/amis-ui/src/components/Tinymce.tsx b/packages/amis-ui/src/components/Tinymce.tsx
index d72279657d6..edadf0ec316 100644
--- a/packages/amis-ui/src/components/Tinymce.tsx
+++ b/packages/amis-ui/src/components/Tinymce.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 // Import TinyMCE
 // @ts-ignore
-import tinymce from 'tinymce/tinymce';
+import tinymce, {Editor} from 'tinymce/tinymce';
 
 // A theme is also required
 import 'tinymce/icons/default/index';
@@ -63,7 +63,7 @@ export default class TinymceEditor extends React.Component<TinymceEditorProps> {
     outputFormat: 'html'
   };
   config?: any;
-  editor?: any;
+  editor?: Editor;
   unmounted = false;
   editorInitialized?: boolean = false;
   currentContent?: string;
@@ -85,14 +85,25 @@ export default class TinymceEditor extends React.Component<TinymceEditorProps> {
         this.editor?.setContent((this.currentContent = props.model || ''));
     }
 
-    if (!isEqual(this.props.config, prevProps.config)) {
+    if (this.editor && !isEqual(this.props.config, prevProps.config)) {
+      this.editor.contentWindow.removeEventListener(
+        'unload',
+        this.handleIframeUnload
+      );
       tinymce.remove(this.editor);
       this.initTiny();
     }
   }
 
   componentWillUnmount() {
-    tinymce.remove(this.editor);
+    if (this.editor) {
+      this.editor.contentWindow.removeEventListener(
+        'unload',
+        this.handleIframeUnload
+      );
+      tinymce.remove(this.editor);
+    }
+
     this.unmounted = true;
   }
 
@@ -199,7 +210,19 @@ export default class TinymceEditor extends React.Component<TinymceEditorProps> {
     this.unmounted || tinymce.init(this.config);
   }
 
-  initEditor(e: any, editor: any) {
+  @autobind
+  handleIframeUnload() {
+    this.editor!.contentWindow.removeEventListener(
+      'unload',
+      this.handleIframeUnload
+    );
+    requestAnimationFrame(() => {
+      tinymce.remove(this.editor!);
+      this.initTiny();
+    });
+  }
+
+  initEditor(e: any, editor: Editor) {
     const {model, onModelChange, outputFormat, onFocus, onBlur} = this.props;
 
     const value = model || '';
@@ -218,6 +241,10 @@ export default class TinymceEditor extends React.Component<TinymceEditorProps> {
 
     onFocus && editor.on('focus', onFocus);
     onBlur && editor.on('blur', onBlur);
+
+    // iframe 移动后，就不可用了，那只能重新初始化
+    // https://poeticcode.wordpress.com/2010/06/08/iframe-reloads-when-moved-around-the-dom-tree/
+    editor.contentWindow.addEventListener('unload', this.handleIframeUnload);
   }
 
   render() {