如何过滤可生成字符的keyup事件？基于contenteditable(TinyMCE)场景

我完全理解你的场景——因为要等字符真正出现在TinyMCE的contenteditable区域后再设置样式，keypress事件触发时机太早（内容还没插入DOM），所以只能用keyup，但又要过滤掉那些不生成可见字符的按键（比如退格、箭头键、快捷键等）。

下面给你两种可靠的实现思路，结合TinyMCE的实际使用场景：

方法一：通过event.key判断可打印字符 #

利用keyup事件中event.key的特性：可生成字符的按键，key值就是单个字符（比如输入'a'时e.key === 'a'），而控制键的key值是对应的名称（比如'Backspace'、'ArrowUp'）。同时还要排除组合键触发的情况（比如Ctrl+A这类快捷键）：

tinymce.init({
  selector: '#your-editor-id',
  setup: function(editor) {
    editor.on('keyup', function(e) {
      // 判断是否是可生成字符的按键：单个字符 + 非组合键
      const isPrintableKey = e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey;
      
      if (isPrintableKey) {
        // 这里执行你的样式设置逻辑，此时内容已经插入DOM了
        // 示例：给当前选中的内容（刚输入的字符）添加自定义样式
        const currentNode = editor.selection.getNode();
        if (currentNode) {
          editor.dom.addClass(currentNode, 'custom-highlight');
        }
      }
    });
  }
});

方法二：维护控制键列表精准过滤 #

如果需要更精准的控制（比如要排除Enter键但保留其他可换行的情况），可以维护一个控制键列表，直接判断当前按键是否在列表内：

tinymce.init({
  selector: '#your-editor-id',
  setup: function(editor) {
    // 定义所有不生成可见字符的控制键
    const controlKeys = [
      'Backspace', 'Tab', 'Enter', 'Shift', 'Control', 'Alt', 'CapsLock',
      'Escape', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
      'Delete', 'Insert', 'Home', 'End', 'PageUp', 'PageDown'
    ];
    
    editor.on('keyup', function(e) {
      // 不在控制键列表中，且非组合键触发
      const isPrintableKey = !controlKeys.includes(e.key) && !e.ctrlKey && !e.altKey && !e.metaKey;
      
      if (isPrintableKey) {
        // 示例：使用TinyMCE的格式化API应用样式
        editor.formatter.apply('bold');
      }
    });
  }
});

关于你提到的MDNchar属性的说明 #

你说的MDN文档里的char属性其实已经被废弃了，现在不推荐使用。替代方案就是上面的event.key或者event.charCode（不过charCode也在逐步被淘汰，key是更现代的选择）。

额外提示 #

如果需要处理粘贴、拖拽等非键盘输入的内容，还可以结合TinyMCE的input事件一起监听，确保所有新插入的内容都能被样式化。

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