使用contenteditable属性可快速实现轻量级富文本编辑器，通过添加contenteditable=”true”使元素可编辑，结合document.execCommand（已废弃但广泛支持）执行加粗、斜体、插入图片等格式化操作，并利用Selection与Range API精确控制选区内容，如高亮文本；监听input事件实时捕获内容变化，保存时存储innerHTML或innerText并注意XSS防护，适合自定义需求场景。
使用 contenteditable 属性结合 HTML5 提供的文本操作 API，可以快速实现一个轻量级富文本编辑器。这种方法无需引入大型框架或第三方库，适合自定义需求较强的场景。
启用 contenteditable 实现可编辑区域
在任意 HTML 元素上添加 contenteditable=”true”，即可让该元素内容变为可编辑状态。
在这里输入内容...
浏览器会允许用户直接在这个 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, ‘
‘)
：将段落转为标题
示例按钮绑定加粗功能：
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的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589004.html
微信扫一扫 
支付宝扫一扫 
