この記事では、TinyMCE エディターが DOM から削除され、再挿入された後に使用できなくなるという一般的な問(wèn)題について説明します。中心となる解決策は、TinyMCE コンテナが DOM から削除されるときに、対応する TinyMCE インスタンスを同期的に破棄する必要があるということです。コンテナが DOM に再挿入されると、TinyMCE を再初期化する必要があります。インスタンスのライフサイクル管理を正しく行うことで、動(dòng)的コンテンツのシナリオにおけるエディターの安定した動(dòng)作を保証できます。

TinyMCE 動(dòng)的コンテンツ管理の課題

最新の Web アプリケーション開(kāi)発では、DOM 要素の動(dòng)的な読み込み、削除、または再配置が一般的な操作です。ただし、TinyMCE リッチ テキスト エディターがアタッチされている DOM 要素 (通常はテキストエリア) がドキュメントから削除され、その後再挿入されると、多くの場(chǎng)合、エディターはテキストを入力できなくなり、機(jī)能が失われます。

この問(wèn)題の理由は、TinyMCE が初期化中に IFRAME を作成してイベント リスナーを登録するだけでなく、內(nèi)部狀態(tài)と DOM 構(gòu)造の間に複雑な関連付けも確立することです。これらの內(nèi)部狀態(tài)およびイベント リスナーは、コンテナ要素が DOM から削除されただけでは自動(dòng)的にクリーンアップされません。後で単純にコンテナ要素を DOM に再挿入した場(chǎng)合、TinyMCE はそれが削除された古いインスタンスであることを「認(rèn)識(shí)」しないか、必要なバインディングをすべて適切に再確立できません。この結(jié)果、エディタは存在しているように見(jiàn)えますが、実際には無(wú)効になっています。

適切な TinyMCE インスタンスのライフサイクル管理

上記の問(wèn)題を解決するための中心的な原則は、TinyMCE インスタンスのライフ サイクルを、それがアタッチされている DOM 要素のライフ サイクルと同期させる必要があるということです。これは、DOM 要素が削除されると、対応する TinyMCE インスタンスも明示的に破棄される必要があることを意味します。 DOM 要素が再挿入されると、TinyMCE を再初期化する必要があります。

1. 既存のインスタンスを破棄します

TinyMCE コンテナ要素が DOM から削除される前、または削除と同時(shí)に、対応する TinyMCE インスタンスを明示的に破棄する必要があります。これは、次の手順に従って行うことができます。

1. エディター インスタンスを取得する: tinymce.get('editor_id') メソッドを使用して、現(xiàn)在のエディター インスタンスを取得します。ここでの「editor_id」は、tinymce.init() の selector 屬性によって指定される DOM 要素の ID です。
2. Remove() メソッドを呼び出す: インスタンスが取得されたら、その Remove() メソッドを呼び出します。このメソッドは、関連するすべての DOM 要素 (IFRAME など) をクリーンアップし、イベント リスナーを削除し、內(nèi)部狀態(tài)を破棄することにより、リソース リークや潛在的な競(jìng)合を回避します。

2. インスタンスを再初期化する

TinyMCE のコンテナ要素が DOM に再挿入されると、それを新しいコンテキストとして扱う必要があり、tinymce.init() メソッドが再度呼び出されて、新しいエディタ インスタンスが作成されます。

1. DOM 要素が存在することを確認(rèn)してください。 tinymce.init() を呼び出す前に、TinyMCE がアタッチされる te??xtarea またはその他の要素が DOM 內(nèi)にすでに存在していることを確認(rèn)してください。
2. tinymce.init() を呼び出します。最初に初期化したときと同じ構(gòu)成 (または必要に応じて調(diào)整された構(gòu)成) を使用して TinyMCE を再初期化します。

サンプルコード

次の例は、動(dòng)的 DOM 操作中に TinyMCE インスタンスのライフサイクルを適切に管理する方法を示しています。

 


    <meta charset="UTF-8">
    <title>TinyMCE DOM の再配置例</title>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"></script>
    
        body { フォントファミリー: サンセリフ;マージン: 20px; }
        ボタン { マージン右: 10px;パディング: 8px 15px;カーソル: ポインタ; }
        #editor-container { margin-top: 20px;境界線: 1px 実線 #ccc;パディング: 10px; }
    スタイル>



    <button onclick="initOrReinitTinyMCE()">TinyMCE の初期化/再初期化</button>
    <button onclick="removeContent()">コンテンツを削除</button>
    <button onclick="appendContent()">コンテンツを追加</button>

    <div id="親コンテナ">
        <!-- TinyMCE エディタはこのコンテナ內(nèi)で動(dòng)的に挿入/削除します -->
    </div>

    
        constparentContainer = document.getElementById('親コンテナ');
        // const originalEditorHtml = ` を使用して、再挿入のために元のエディタ コンテナの HTML 構(gòu)造を保存します。
            <div id="エディタコンテナ">
                <textarea id="コンテンツエディター"></textarea>
            </div>
        `;

        /**
         * TinyMCE エディターを初期化または再初期化します。
         * 既存のインスタンスは再初期化前にチェックされ、破棄されます。
         */
        関數(shù) initOrReinitTinyMCE() {
            // 1. 既存の TinyMCE インスタンスを確認(rèn)して破棄します constexistingEditor = tinymce.get('content-editor');
            if (既存のエディタ) {
                既存のEditor.remove();
                console.log('既存の TinyMCE インスタンスは破棄されました。');
            }

            // 2. エディター コンテナーとテキストエリア要素が DOM に存在することを確認(rèn)します if (!document.getElementById('content-editor')) {
                // textarea が存在しない場(chǎng)合は、コンテナが削除されている可能性があるため、再度追加する必要があります console.warn('TinyMCE の textarea 要素が存在しません。最初に [コンテンツの追加] ボタンをクリックしてください。');
                戻る;
            }

            // 3. TinyMCE を再初期化する
            tinymce.init({
                selector: '#content-editor', // この ID が一意であることを確認(rèn)してください plugins: 'anchor autolink Charmap codesample emoticons image link lists media searchreplace table Visualblocks wordcount',
                ツールバー: '元に戻す やり直し |ブロック フォントファミリー フォントサイズ |太字斜體下線取り消し線 |リンク畫(huà)像メディアテーブル |行の高さを揃える | numlist bulllist インデント outdent |顔文字チャームマップ |フォーマットを削除します'、
                高さ: 300
            }).then(エディター => {
                console.log('TinyMCE は初期化または再初期化されました。', editors[0]);
            });
        }

        /**
         * DOM から TinyMCE コンテナを削除し、TinyMCE インスタンスを破棄します。
         */
        関數(shù)removeContent() {
            const editor = tinymce.get('コンテンツエディタ');
            if (編集者) {
                editor.remove(); // TinyMCE インスタンスを破棄します console.log('TinyMCE インスタンスが破棄されました。');
            }

            const editorContainer = document.getElementById('エディタコンテナ');
            if (editorContainer && editorContainer.parentNode) {
                editorContainer.parentNode.removeChild(editorContainer); // DOM からコンテナを削除します console.log('TinyMCE コンテナが DOM から削除されました。');
            }
        }

        /**
         * TinyMCE コンテナを DOM に追加し直します。
         */
        関數(shù) appendContent() {
            // 重複を避けるためにコンテナが存在しない場(chǎng)合にのみ追加します if (!document.getElementById('editor-container')) {
                parentContainer.innerHTML = OriginalEditorHtml; // テキストエリアを含む HTML を再挿入します
                console.log('TinyMCE コンテナが DOM に再度追加されました。');
            } それ以外 {
                console.log('TinyMCE コンテナはすでに DOM に存在します。');
            }
        }

        // ページの読み込み時(shí)に TinyMCE を一度自動(dòng)的に初期化します
        document.addEventListener('DOMContentLoaded', () => {
            appendContent(); // まずコンテンツ コンテナを追加します initOrReinitTinyMCE(); // 次に TinyMCE を初期化します
        });
    

以上がDOM での再配置後の TinyMCE の正しい初期化と管理の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。