html5使用contenteditable实现富文本编辑器 html5使用文本操作的API

使用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, '<h1>')：将段落转为标题

示例按钮绑定加粗功能：

v3.0ok3w图片系统头条版

OK3W图片头条系统说明 1:此程序较为适合展示类网站使用，适合首页略缩图更新不太频繁的网站使用，因为添加首页略缩图的时候手工操作的过程比较多，较为繁琐。 2:本次优化编辑器的部分，使编辑器加载的时候更加快速一些。 3：在编辑后院放置3套编辑器，分别是“内页文章编辑器”，“首页略缩图编辑器”，“列表页图片编辑器”，使得操作的时候清晰明了。 4：重要重要重要，要想在首页显示某篇文章略缩图，需

63

查看详情

<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，能构建出满足多数场景的富文本编辑器雏形，虽不复杂但容易忽略细节处理，比如光标位置维护和跨浏览器兼容性问题。后续可逐步扩展撤销、语法高亮、拖拽上传等功能。

以上就是html5使用contenteditable实现富文本编辑器 html5使用文本操作的API的详细内容，更多请关注php中文网其它相关文章！