html execCommand命令执行

2026-04-22 00:00:08 1657阅读 0评论

用 HTML execCommand 实现常见文本编辑：不走官网新API的务实指南

在网页里给用户一段可编辑的区域，常见需求是快速调整字体、加粗、撤销重做等。HTML5 已经逐步用更现代的 API 取代 execCommand，但一些老旧项目或需要兼容遗留代码的场景，仍能直接用 execCommand 达成不少实用操作。本文不讲新API的全景，只聚焦几个高频用例，把命令、参数与注意点说清楚，并给出可直接复制使用的代码片段。

场景一：在可编辑区域执行字体与样式

当内容需要在富文本里即时修改，execCommand 提供了直接的命令式调用方式，比用 JS 操作 style 灵活。以一个可编辑的 div 为例，执行字体与样式的思路很简单：

<div contenteditable="true" id="editableArea"></div>

<script>
  function execStyle(command, value = '') {
    if (document.queryCommandSupported(command)) {
      document.execCommand(command, false, value);
    }
  }

  // 设置字体为微软雅黑，大小14px
  execStyle('fontName', '微软雅黑');
  execStyle('fontSize', '14');

  // 设置文本颜色
  execStyle('style', 'color: #333;');
</script>

注意：contenteditable 能力受同源策略与安全上下文限制；部分样式在浏览器兼容上会有差异，建议先在小范围内测试。

场景二：撤销与重做，让操作更像“纸上写”

在需要多次修改的表单或笔记区域，撤销/重做是刚需。execCommand 本身支持这个：

<div contenteditable="true" id="editableArea"></div>

<script>
  const undo = () => {
    if (document.queryCommandSupported('undo')) {
      document.execCommand('undo');
    }
  };

  const redo = () => {
    if (document.queryCommandSupported('redo')) {
      document.execCommand('redo');
    }
  };

  // 先做一次加粗
  document.execCommand('bold', false, null);
  // 执行撤销
  undo();
  // 执行重做
  redo();
</script>

每次操作后浏览器都会记录状态，多次撤销后可重做，适合“改来改去”的场景。

场景三：处理列表与块级结构

列表、标题、段落这些结构的切换，execCommand 也能轻松覆盖：

<div contenteditable="true" id="editableArea"></div>

<script>
  // 切换为标题1
  document.execCommand('formatBlock', false, 'h1');

  // 切换为无序列表
  document.execCommand('formatBlock', false, 'UL');

  // 切换为段落
  document.execCommand('formatBlock', false, 'P');
</script>

formatBlock 通过传入标签名，可以快速在标题、列表、段落之间切换，提升结构化编辑效率。

场景四：加粗与斜体，一步到位

对于强调或弱强调的文本，加粗和斜体是高频操作：

<div contenteditable="true" id="editableArea">这是一个可以加粗的句子</div>

<script>
  // 选中后执行加粗
  document.execCommand('bold', false, null);
  // 选中后执行斜体
  document.execCommand('italic', false, null);
</script>

若要先选中再操作，可以使用 range 或给文本添加选中样式，但 execCommand 会按当前选区执行，理解这一点能避免意外效果。