Livewire切换条件下TinyMCE无法二次加载问题

问题根源 #

动态切换$rich状态时，新渲染的textarea.tinymce不会被TinyMCE自动初始化——因为TinyMCE默认只在页面首次加载时扫描绑定元素；同时切换到普通文本框时，未销毁的旧TinyMCE实例会导致后续初始化冲突。

解决步骤 #

1. 优化视图代码（可选但推荐）

统一文本框的DOM标识，避免重复渲染不同的textarea，减少实例冲突：

<textarea name="content" id="content-editor" class="{{ $rich ? 'tinymce' : '' }}">{{ $content }}</textarea>

如果保留原有条件渲染逻辑，需确保每次切换时旧的textarea被完全移除。

2. 编写状态切换的JS逻辑

监听$rich状态变化事件（比如切换按钮点击、AJAX回调），执行销毁旧实例→重新初始化的流程：

// 工具函数：处理编辑器切换
function toggleRichEditor(isRich) {
    const editorId = 'content-editor';
    const editorEl = document.getElementById(editorId);

    // 先销毁已有TinyMCE实例
    if (tinymce.get(editorId)) {
        tinymce.remove(editorId);
    }

    if (isRich) {
        // 初始化TinyMCE
        tinymce.init({
            selector: `#${editorId}`,
            // 替换为你的实际配置
            toolbar: 'undo redo | bold italic | alignleft aligncenter alignright',
            plugins: 'advlist autolink lists link',
            height: 300
        });
        editorEl.classList.add('tinymce');
    } else {
        editorEl.classList.remove('tinymce');
    }
}

// 示例：绑定切换按钮事件
document.getElementById('rich-toggle-btn').addEventListener('click', function() {
    // 这里需要获取最新的$rich状态，比如通过AJAX请求后端或读取DOM属性
    const currentRichState = /* 你的状态获取逻辑 */;
    toggleRichEditor(currentRichState);
});

3. 适配局部刷新场景

如果用AJAX局部更新视图（比如Blade的局部视图渲染），在DOM更新完成后必须调用toggleRichEditor函数，确保新渲染的文本框被正确初始化。

内容的提问来源于stack exchange，提问作者mahbub