如何利用 JavaScript 实现一个支持快捷键操作的富文本编辑器？

来源：站长查询作者：天穹小白头衔：草根站长
导读：本期聚焦于小伙伴创作的《如何利用 JavaScript 实现一个支持快捷键操作的富文本编辑器？》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何利用 JavaScript 实现一个支持快捷键操作的富文本编辑器？》有用，将其分享出去将是对创作者最好的鼓励。

富文本编辑器是很多Web应用中常见的功能模块，支持快捷键操作可以让用户在不切换鼠标的情况下快速完成加粗、斜体、撤销、重做等常用操作，提升编辑效率。下面我们就基于原生JavaScript实现一个基础的支持快捷键操作的富文本编辑器。

如何利用 JavaScript 实现一个支持快捷键操作的富文本编辑器？

核心实现思路

实现富文本编辑器的核心是利用HTML的contenteditable属性，让普通的元素支持内容编辑，再通过document.execCommand方法执行各种编辑命令，最后监听键盘事件实现快捷键绑定。

1. 搭建编辑器基础结构

首先我们需要创建编辑器的DOM结构，包含工具栏和编辑区域两部分，工具栏提供操作按钮，编辑区域用于内容输入和展示。

<div class="editor-container">
  <!-- 工具栏 -->
  <div class="toolbar">
    <button type="button" data-command="bold">加粗</button>
    <button type="button" data-command="italic">斜体</button>
    <button type="button" data-command="underline">下划线</button>
    <button type="button" data-command="undo">撤销</button>
    <button type="button" data-command="redo">重做</button>
  </div>
  <!-- 编辑区域 -->
  <div class="edit-area" contenteditable="true">
    在这里输入内容...
  </div>
</div>

2. 初始化样式

给编辑器添加基础样式，让编辑区域有明确的边界和合适的高度，提升用户体验。

.editor-container {
  width: 800px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 20px auto;
}

.toolbar {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f5;
}

.toolbar button {
  margin-right: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
}

.toolbar button:hover {
  background-color: #e9e9e9;
}

.edit-area {
  min-height: 300px;
  padding: 15px;
  outline: none;
  line-height: 1.6;
}

实现编辑功能

我们可以通过监听工具栏按钮的点击事件，调用document.execCommand方法执行对应的编辑命令，实现基础的编辑功能。

// 获取工具栏和编辑区域元素
const toolbar = document.querySelector('.toolbar');
const editArea = document.querySelector('.edit-area');

// 监听工具栏按钮点击
toolbar.addEventListener('click', function(e) {
  // 判断点击的是否是按钮
  if (e.target.tagName === 'BUTTON') {
    const command = e.target.dataset.command;
    // 执行对应的编辑命令
    document.execCommand(command, false, null);
    // 点击后保持编辑区域焦点
    editArea.focus();
  }
});

document.execCommand的第一个参数是命令名称，第二个参数表示是否需要显示默认的用户界面，第三个参数是命令的附加参数，比如插入链接时的链接地址，这里基础命令不需要额外参数所以传null。

绑定快捷键操作

快捷键的实现需要监听编辑区域的键盘事件，判断按下的按键组合，然后执行对应的编辑命令。常见的快捷键组合如Ctrl+B加粗、Ctrl+I斜体、Ctrl+Z撤销、Ctrl+Y重做等。

// 监听编辑区域的键盘按下事件
editArea.addEventListener('keydown', function(e) {
  // 判断是否按下了Ctrl键（Mac系统是Command键）
  const isCtrlOrMeta = e.ctrlKey || e.metaKey;
  if (!isCtrlOrMeta) {
    return;
  }

  // 根据按键组合执行对应命令
  switch(e.key.toLowerCase()) {
    case 'b':
      // Ctrl+B 加粗
      e.preventDefault(); // 阻止默认行为
      document.execCommand('bold', false, null);
      break;
    case 'i':
      // Ctrl+I 斜体
      e.preventDefault();
      document.execCommand('italic', false, null);
      break;
    case 'u':
      // Ctrl+U 下划线
      e.preventDefault();
      document.execCommand('underline', false, null);
      break;
    case 'z':
      // Ctrl+Z 撤销
      e.preventDefault();
      document.execCommand('undo', false, null);
      break;
    case 'y':
      // Ctrl+Y 重做
      e.preventDefault();
      document.execCommand('redo', false, null);
      break;
    default:
      break;
  }
});

这里需要注意调用e.preventDefault()方法阻止浏览器的默认快捷键行为，避免和我们的自定义快捷键冲突。如果是Mac系统，用户按下Command键时e.metaKey会为true，所以需要做兼容判断。

功能扩展与注意事项

上述实现是一个基础的富文本编辑器，还可以根据需求扩展更多功能：

  • 添加更多编辑命令，比如插入标题、插入有序列表、修改字体颜色等，只需要在工具栏添加对应按钮，绑定对应的execCommand命令即可。
  • 优化快捷键提示，在工具栏按钮上添加title属性，提示用户对应的快捷键，比如加粗按钮的title可以设置为"加粗(Ctrl+B)"。
  • 处理内容粘贴的逻辑，比如过滤粘贴内容中的样式，只保留纯文本，避免编辑区域样式混乱。

需要注意的是document.execCommand方法虽然兼容性好，但已经被W3C标记为废弃，不过目前主流浏览器仍然支持，如果是新的项目可以考虑使用更现代的Selection和Range API实现编辑功能，但是execCommand对于快速实现基础功能的场景来说足够简单易用。

实现富文本编辑器时，编辑区域的内容变化可以通过监听input事件获取，用于将编辑内容同步到后端或者展示预览效果。

完整示例代码

下面是整合了所有功能的完整代码，可以直接复制到HTML文件中运行。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>快捷键富文本编辑器</title>
  <style>
    .editor-container {
      width: 800px;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin: 20px auto;
    }

    .toolbar {
      padding: 10px;
      border-bottom: 1px solid #ddd;
      background-color: #f5f5f5;
    }

    .toolbar button {
      margin-right: 8px;
      padding: 6px 12px;
      cursor: pointer;
      border: 1px solid #ccc;
      border-radius: 3px;
      background-color: #fff;
    }

    .toolbar button:hover {
      background-color: #e9e9e9;
    }

    .edit-area {
      min-height: 300px;
      padding: 15px;
      outline: none;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="editor-container">
    <div class="toolbar">
      <button type="button" data-command="bold" title="加粗(Ctrl+B)">加粗</button>
      <button type="button" data-command="italic" title="斜体(Ctrl+I)">斜体</button>
      <button type="button" data-command="underline" title="下划线(Ctrl+U)">下划线</button>
      <button type="button" data-command="undo" title="撤销(Ctrl+Z)">撤销</button>
      <button type="button" data-command="redo" title="重做(Ctrl+Y)">重做</button>
    </div>
    <div class="edit-area" contenteditable="true">
      在这里输入内容...
    </div>
  </div>

  <script>
    const toolbar = document.querySelector('.toolbar');
    const editArea = document.querySelector('.edit-area');

    // 工具栏按钮点击事件
    toolbar.addEventListener('click', function(e) {
      if (e.target.tagName === 'BUTTON') {
        const command = e.target.dataset.command;
        document.execCommand(command, false, null);
        editArea.focus();
      }
    });

    // 快捷键绑定
    editArea.addEventListener('keydown', function(e) {
      const isCtrlOrMeta = e.ctrlKey || e.metaKey;
      if (!isCtrlOrMeta) {
        return;
      }

      switch(e.key.toLowerCase()) {
        case 'b':
          e.preventDefault();
          document.execCommand('bold', false, null);
          break;
        case 'i':
          e.preventDefault();
          document.execCommand('italic', false, null);
          break;
        case 'u':
          e.preventDefault();
          document.execCommand('underline', false, null);
          break;
        case 'z':
          e.preventDefault();
          document.execCommand('undo', false, null);
          break;
        case 'y':
          e.preventDefault();
          document.execCommand('redo', false, null);
          break;
        default:
          break;
      }
    });
  </script>
</body>
</html>

JavaScript富文本编辑器快捷键操作execCommand修改时间：2026-06-30 09:30:55

免责声明：​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。

上一篇如何利用JavaScript的Web组件实现跨框架复用，以及它在设计系统或微前端中的集成方案

下一篇Angular模板方法未在加载时执行该如何调试与排查

猜你喜欢

内容垂直聚焦
专注技术核心技术栏目，确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计，为用户提供无干扰的纯技术知识沉淀，精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进，构建清晰学习路径，帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈，深入技术细节与实践难点。无论是数据库优化还是服务器配置，均结合真实场景与代码示例进行剖析，致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程，从数据库操作到服务器运维，形成完整闭环，一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性，步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目，显著缩短从学习到实践的距离，快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代，紧跟主流技术发展趋势，为用户提供经久不衰的学习价值。

负责任网站 - 免责声明 - 隐私政策 - 网站地图

举报邮箱：chomcom@qq.com

Copyright (C) www.ipipp.com All Rights Reserved.