TinyMCE切换HTML标签修改内容后，getContent()仍返回Visual标签内容

问题原因 #

WordPress编辑器的Visual标签对应TinyMCE实例，HTML标签对应原生textarea元素。切换到HTML模式修改内容后，新内容仅保存在textarea中，未同步到TinyMCE实例。直接调用tinymce.editors[xxxx].getContent()只会读取TinyMCE实例中的旧内容，导致获取结果不符合预期。

解决方案 #

方案1：使用WordPress官方封装的获取方法 #

WordPress提供了wp.editor.getContent()函数，会自动检测当前激活的标签页，返回对应模式下的最新内容：

var content = wp.editor.getContent('xxxx'); // 替换xxxx为编辑器对应textarea的ID

方案2：手动判断当前模式再获取内容 #

如果需要自定义逻辑，可先判断当前激活的标签页模式，再选择对应的内容获取方式：

var editorId = 'xxxx';
var $editorWrap = jQuery('#' + editorId).closest('.wp-editor-wrap');
var content;

// 判断当前是否为HTML模式
if ($editorWrap.hasClass('html-active')) {
    // HTML模式下直接读取textarea的value
    content = jQuery('#' + editorId).val();
} else {
    // Visual模式下读取TinyMCE的内容
    content = tinymce.editors[editorId].getContent();
}

额外建议：监听标签切换事件同步内容 #

如果需要确保TinyMCE实例和textarea内容始终同步，可监听编辑器的切换事件，在切换时双向同步内容：

jQuery(document).on('wp-editor-switch', function(event, editorId, mode) {
    if (mode === 'html') {
        // 切换到HTML模式时，将TinyMCE内容同步到textarea
        jQuery('#' + editorId).val(tinymce.editors[editorId].getContent());
    } else if (mode === 'tinymce') {
        // 切换到Visual模式时，将textarea内容同步到TinyMCE
        tinymce.editors[editorId].setContent(jQuery('#' + editorId).val());
    }
});

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