解决TinyMCE在DOM重插入后无法编辑的问题

// 假设您的TinyMCE容器是一个ID为 'editor-container' 的div，
// 内部包含一个ID为 'content' 的textarea，TinyMCE将绑定到 'content'
const container = document.getElementById('editor-container');
const editorTargetId = 'content'; // TinyMCE绑定的textarea/div的ID

/**
 * 初始化或重新初始化TinyMCE编辑器。
 * 如果存在旧实例，此函数会先尝试移除它，确保干净的初始化。
 */
function initTinyMCE() {
    // 在重新初始化前，检查并移除可能存在的旧编辑器实例，以防万一
    const existingEditor = tinymce.get(editorTargetId);
    if (existingEditor) {
        existingEditor.remove();
        console.log(`Removed existing TinyMCE instance for #${editorTargetId}.`);
    }

    tinymce.init({
        selector: `#${editorTargetId}`,
        plugins: 'advlist autolink lists link image charmap print preview anchor',
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
        height: 300,
        menubar: false,
        // 其他TinyMCE配置...
    });
    console.log(`TinyMCE initialized for #${editorTargetId}.`);
}

/**
 * 从DOM中移除TinyMCE容器元素，并显式销毁关联的TinyMCE编辑器实例。
 */
function removeContent() {
    if (container && container.parentNode) {
        // 1. 获取TinyMCE编辑器实例
        const editor = tinymce.get(editorTargetId);
        // 2. 如果实例存在，则显式销毁它
        if (editor) {
            editor.remove();
            console.log(`TinyMCE editor instance for #${editorTargetId} removed.`);
        }
        // 3. 从DOM中移除容器元素
        container.parentNode.removeChild(container);
        console.log('Editor container removed from DOM.');
    } else {
        console.log('Container not found or already removed from DOM.');
    }
}

/**
 * 将TinyMCE容器元素重新插入DOM。
 * 注意：此函数仅负责插入DOM，不负责初始化TinyMCE。
 */
function appendContent() {
    // 假设我们有一个预定义的父容器，例如 body
    const parentElement = document.body; // 或者您实际的父容器
    if (!container.parentNode) { // 检查是否已在DOM中，避免重复插入
        parentElement.appendChild(container);
        console.log('Editor container appended to DOM.');
    } else {
        console.log('Container already in DOM.');
    }
}

// 示例操作流程（您可以在页面加载时或通过按钮点击触发这些函数）
// 1. 初始加载时：
// appendContent(); // 确保容器在DOM中
// initTinyMCE();   // 初始化TinyMCE

// 2. 需要移除时：
// removeContent();

// 3. 需要重新显示时：
// appendContent(); // 重新插入DOM
// initTinyMCE();   // 重新初始化TinyMCE