如何使用jQuery读取带editor_class类的wp_editor内容？

我之前也碰到过一模一样的情况——直接通过类名读取wp_editor对应的textarea内容，结果拿到的要么是空值，要么不是用户刚输入的最新内容。这是因为wp_editor默认集成了TinyMCE可视化编辑器，它的内容存储逻辑和普通textarea完全不同，得用对应的API来处理才行。

下面给你几个可行的解决方法：

方法1：通过编辑器ID直接获取（最可靠） #

wp_editor初始化时你肯定指定了唯一ID（第二个参数），用这个ID配合TinyMCE的API是最稳妥的方式：

首先假设你的wp_editor是这样初始化的：

wp_editor( '', 'my_custom_editor', array(
    'editor_class' => 'editor_class',
    // 其他配置项
) );

然后用JavaScript获取内容：

function getMyEditorContent() {
    const editorId = 'my_custom_editor';
    let content = '';

    // 先检查TinyMCE是否已经初始化了这个编辑器
    if (tinyMCE.get(editorId)) {
        // 可视化模式下用API获取最新内容
        content = tinyMCE.get(editorId).getContent();
    } else {
        // 纯文本模式直接读取textarea的值
        content = document.getElementById(editorId).value;
    }

    return content;
}

方法2：通过自定义类名获取（适合多编辑器场景） #

如果页面有多个wp_editor，只想获取带editor_class类的那个，可以遍历TinyMCE的实例列表：

function getEditorContentByClass() {
    let content = '';

    // 遍历所有已初始化的TinyMCE编辑器
    for (const editor of tinyMCE.editors) {
        // 检查编辑器对应的原生textarea是否有目标类
        if (editor.getElement().classList.contains('editor_class')) {
            content = editor.getContent();
            break; // 找到第一个匹配的就停止，多个的话可以存进数组
        }
    }

    // 如果没找到TinyMCE实例（比如编辑器处于纯文本模式），直接找textarea
    if (!content) {
        const textarea = document.querySelector('textarea.editor_class');
        if (textarea) content = textarea.value;
    }

    return content;
}

方法3：表单提交时同步内容再读取 #

如果是在表单提交场景下，可以先触发TinyMCE把内容同步到textarea，之后再读取就和普通输入框一样了：

document.querySelector('form').addEventListener('submit', function(e) {
    // 同步所有TinyMCE编辑器的内容到对应的textarea
    tinyMCE.triggerSave();
    
    // 现在可以安全读取带类名的textarea内容了
    const content = document.querySelector('textarea.editor_class').value;
    console.log('提交的内容:', content);
});

为什么直接读textarea不行？ #

当TinyMCE处于可视化编辑模式时，用户输入的内容其实是存在TinyMCE的内部实例里的，原生textarea只是作为“备份”存在，不会实时更新。只有当切换到纯文本模式，或者触发了triggerSave()方法时，textarea的值才会和编辑器内容同步。

内容的提问来源于stack exchange，提问作者Abdus Sattar Bhuiyan