开发WYSIWYG编辑器时，ContentEditable下execCommand的替代方案有哪些？

你之前模拟键盘事件的方案失效是浏览器的安全策略限制：所有通过JS构造的合成事件（比如你写的new KeyboardEvent）默认不会触发浏览器的原生默认行为，所以对contenteditable元素不会触发加粗效果，这个方案从底层逻辑就行不通。

核心实现思路：基于Selection + Range API 手动操作DOM #

这是目前所有主流自研富文本编辑器的通用底层实现，完全兼容现有浏览器，没有弃用风险。

基础加粗功能实现示例：

function toggleBold() {
  const selection = window.getSelection();
  // 无选中内容直接返回
  if (!selection || selection.rangeCount === 0) return;
  const range = selection.getRangeAt(0);

  // 检查选中内容是否已经被加粗
  const parentBold = range.commonAncestorContainer.parentElement.closest('strong, b');
  if (parentBold) {
    // 已经加粗则解包：把strong的内容拿出来替换掉strong标签
    const parent = parentBold.parentNode;
    while (parentBold.firstChild) {
      parent.insertBefore(parentBold.firstChild, parentBold);
    }
    parent.removeChild(parentBold);
    // 恢复选区
    selection.removeAllRanges();
    selection.addRange(range);
    return;
  }

  // 未加粗则包裹strong标签
  const strong = document.createElement('strong');
  strong.appendChild(range.extractContents());
  range.insertNode(strong);

  // 调整选区到加粗内容后，避免光标乱跑
  selection.removeAllRanges();
  const newRange = document.createRange();
  newRange.selectNodeContents(strong);
  newRange.collapse(false);
  selection.addRange(newRange);
}

斜体、下划线等其它格式的实现逻辑完全一致，只需要把标签替换成<em>、<u>等对应的标签即可。

简化实现方案：复用成熟富文本编辑器的核心层 #

如果不想手动处理各种复杂的选区、标签嵌套、历史撤销重做等场景，可以直接引入无UI的富文本核心库：

• 不需要引入完整的编辑器UI组件，只调用核心的格式操作API即可，不用自己踩DOM操作的各种兼容坑
• 原生支持历史栈、选区保留、格式冲突处理等通用能力，开发效率远高于从零实现

注意事项 #

• 手动操作DOM后必须重新设置选区，否则会出现光标丢失、选中状态消失的问题
• 处理格式嵌套时要保证HTML结构合法性，避免出现不符合规范的嵌套结构
• 如果需要支持多浏览器，要额外处理旧版本浏览器的Range API兼容差异

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