如何解决TinyMCE结合Ajax提交表单需双击按钮的问题？

我碰到好多开发者都遇到过这个情况：不用Ajax的时候TinyMCE一点就好，一结合Ajax就得双击提交按钮才生效。其实核心原因很明确——TinyMCE默认不会实时把编辑器里的内容同步到对应的<textarea>里，只有在表单正常提交（非Ajax）或者编辑器失去焦点时才会同步。第一次点击提交时，Ajax拿的还是<textarea>的原始空值或者旧内容，第二次点击前编辑器刚好完成了同步，所以就生效了。

下面给你几个靠谱的解决办法，按优先级来：

1. 提交前手动同步编辑器内容（最推荐） #

这是最直接有效的办法，在你发起Ajax请求之前，先调用TinyMCE的save()方法，强制把编辑器里的内容同步到<textarea>。代码示例：

// 假设你的编辑器ID是comment-editor
$(document).on('click', '#submit-comment-btn', function(e) {
    e.preventDefault(); // 阻止默认的表单跳转提交
    
    // 关键一步：同步编辑器内容到textarea
    tinymce.get('comment-editor').save();
    
    // 收集表单数据，这时候拿的就是最新的编辑器内容了
    var formData = $('#comment-form').serialize();
    
    // 发起Ajax请求
    $.ajax({
        url: '/your-submit-api', // 替换成你的提交接口地址
        type: 'POST',
        data: formData,
        success: function(res) {
            // 提交成功后的处理，比如刷新评论列表、清空编辑器
            console.log('评论提交成功！');
            tinymce.get('comment-editor').setContent(''); // 清空编辑器
        },
        error: function(xhr, err) {
            console.error('提交失败:', err);
        }
    });
});

2. 初始化TinyMCE时开启自动同步（可选） #

如果你希望编辑器内容能实时同步到<textarea>，可以在初始化TinyMCE的时候加个配置，这样不用每次提交都手动调用save()。不过这个会稍微增加一点性能开销，看你需求选择：

tinymce.init({
    selector: '#comment-editor',
    setup: function(editor) {
        // 每次编辑器内容变化或按键时，自动同步到textarea
        editor.on('keyup change blur', function() {
            editor.save();
        });
    },
    // 其他编辑器配置...
});

3. 检查事件绑定是否有冲突 #

有时候如果你的表单是动态加载的（比如通过Ajax渲染的评论区），或者代码里重复绑定了点击事件，也会导致第一次点击不生效。这时候可以用事件委托或者先解绑再绑定：

// 事件委托，适合动态生成的按钮
$(document).on('click', '#submit-comment-btn', function(e) {
    // 提交逻辑同上
});

// 或者先解绑再绑定，避免重复绑定
$('#submit-comment-btn').off('click').on('click', function(e) {
    // 提交逻辑同上
});

总结一下，最核心的就是提交Ajax前一定要同步编辑器内容，只要把这一步做好，单点击提交就没问题了。

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