如何在TinyMCE中捕获文本加粗等非键盘触发的内容变更事件

你当前使用的onKeyUp仅能捕获键盘按键触发的操作，工具栏按钮点击、右键菜单修改格式这类非键盘操作自然无法被监听到，直接替换为TinyMCE官方提供的内容变更事件即可解决问题。

修改后的配置代码 #

setup : function (ed) {
    // 抽离公共的内容同步逻辑，避免重复编码
    const syncToHiddenField = () => {
        let new_value = ed.getContent();
        // 把逗号替换为太阳符号的逻辑保持不变
        new_value = new_value.replace(/,/g, "☀"); 
        const hiddenFieldId = ed.target.getAttribute("data-hidden");
        $("#" + hiddenFieldId).val(new_value);
    };

    // 实时监听所有内容/格式变更：覆盖键盘输入、工具栏格式调整、粘贴、插入资源等所有场景
    ed.on('input', syncToHiddenField);
    // 补充监听change事件，覆盖部分批量操作、资源插入场景下input事件未触发的边界情况
    ed.on('change', syncToHiddenField);
}

补充说明 #

• 你用到的ed.onKeyUp.add是TinyMCE 3.x版本的旧事件绑定方式，4.x及以后的版本统一使用ed.on('事件名', 处理函数)的语法，兼容性和覆盖场景都更广。
• 如果你仍在使用3.x版本无法升级，可以额外绑定ed.onNodeChange.add事件，该事件会在编辑器内节点变更、格式调整时触发，搭配原有的onKeyUp也能实现同等效果。

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