“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《HTML5 contenteditable实现富文本编辑器教程》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

使用contenteditable属性可快速实现轻量级富文本编辑器，通过添加contenteditable="true"使元素可编辑，结合document.execCommand（已废弃但广泛支持）执行加粗、斜体、插入图片等格式化操作，并利用Selection与Range API精确控制选区内容，如高亮文本；监听input事件实时捕获内容变化，保存时存储innerHTML或innerText并注意XSS防护，适合自定义需求场景。

使用 contenteditable 属性结合 HTML5 提供的文本操作 API，可以快速实现一个轻量级富文本编辑器。这种方法无需引入大型框架或第三方库，适合自定义需求较强的场景。

启用 contenteditable 实现可编辑区域

在任意 HTML 元素上添加 contenteditable="true"，即可让该元素内容变为可编辑状态。

<div id="editor" contenteditable="true" style="min-height: 200px; border: 1px solid #ccc; padding: 10px;">
    在这里输入内容...
</div>

浏览器会允许用户直接在这个 div 中输入、删除、格式化文本。默认支持基础的加粗、斜体、换行等行为，但要实现更复杂的格式控制，需要借助 JavaScript 和文档对象模型（DOM）操作。

使用 document.execCommand（已废弃但仍广泛支持）

虽然 document.execCommand 已被标记为过时，但在大多数现代浏览器中依然可用，是实现富文本格式控制的常用方式。

通过 execCommand 可执行如加粗、斜体、插入链接等命令：

• document.execCommand('bold')：切换选中文本的加粗样式
• document.execCommand('italic')：切换斜体
• document.execCommand('insertImage', false, imageUrl)：插入图片
• document.execCommand('createLink', false, url)：创建超链接
• document.execCommand('formatBlock', false, '

  ')：将段落转为标题

示例按钮绑定加粗功能：

<button onclick="document.execCommand('bold')">加粗</button>

Selection 与 Range API 精确控制文本

对于更精细的操作，HTML5 提供了 Selection 和 Range 接口，可用于获取用户选中的文本范围并进行修改。

常见用法包括：

• window.getSelection()：获取当前选中的 Selection 对象
• selection.getRangeAt(0)：获取选区对应的 Range
• range.deleteContents()：删除选中内容
• range.insertNode(node)：在选区插入节点
• range.surroundContents(element)：用某个元素包裹选中内容（注意边界限制）

例如，手动给选中文本添加红色背景：

function highlightText() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;
  const range = selection.getRangeAt(0);
  const span = document.createElement('span');
  span.style.backgroundColor = 'yellow';
  span.appendChild(range.extractContents());
  range.insertNode(span);
}

监听输入与保存内容

可通过监听 input 事件实时捕获编辑区域的变化：

document.getElementById('editor').addEventListener('input', function() {
  console.log('当前内容：', this.innerHTML);
});

保存数据时建议存储 innerHTML 或 innerText，根据是否需要保留格式决定。注意防范 XSS 风险，对输出内容做适当过滤或转义。

基本上就这些核心要点。利用 contenteditable 搭配 execCommand 和 Selection/Range API，能构建出满足多数场景的富文本编辑器雏形，虽不复杂但容易忽略细节处理，比如光标位置维护和跨浏览器兼容性问题。后续可逐步扩展撤销、语法高亮、拖拽上传等功能。

文中关于富文本编辑器,document.execCommand,contenteditable,SelectionAPI,RangeAPI的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5contenteditable富文本教程》文章吧，也可关注golang学习网公众号了解相关技术文章。