答案：通过contenteditable启用编辑，结合execCommand执行格式化，绑定按钮操作实现加粗、斜体、链接等，利用innerHTML获取内容并保存，配合事件监听与Range API增强交互。
实现一个 JavaScript 富文本编辑器，核心是利用
浏览器
原生的
contenteditable
属性结合 Document.execCommand（或现代的 Selection 和 Range API）来捕获用户输入并施加格式。虽然 execCommand 已被弃用，但在许多实际场景中仍广泛使用。以下是实现的基本思路和关键步骤。
启用 contenteditable
让任意元素变成可编辑区域：
这个 div 现在可以像 textarea 一样输入内容，同时支持内联 HTML 标签如 、 等。
绑定工具栏按钮
创建一组按钮用于加粗、斜体、插入链接等操作：
立即学习
“
Java免费学习笔记（深入）
”；
为按钮添加事件监听：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
document.querySelectorAll('[data-command]').forEach(button => {button.addEventListener('click', () => {const command = button.getAttribute('data-command');let arg = null;if (command === 'createLink') {arg = prompt('输入链接地址：');}document.execCommand(command, false, arg);});});
点击按钮会执行对应命令，浏览器自动修改选中内容的格式。
获取和保存内容
编辑完成后，通过 innerHTML 获取富文本内容：
const content = document.getElementById('editor').innerHTML;
将 content 存入数据库或
表单提交
即可。展示时直接用 innerHTML 渲染（注意防范 XSS）。
增强功能建议
监听 input 事件实时保存草稿
使用 Selection 和 Range API 实现更精确的光标控制
封装命令为函数，便于扩展自定义样式
添加图片上传功能：通过 FileReader 将 base64 插入或上传后插入外链 img
使用 MutationObserver 监控结构变化，保持内容纯净
基本上就这些。不复杂但容易忽略细节，比如光标丢失、跨浏览器兼容性、撤销栈行为等。若需生产级功能，推荐基于 Slate.
js
、ProseMirror 或 TinyMCE
二次开发
，但理解原生实现有助于更好地驾驭高级库。
如何实现一个JavaScript的富文本编辑器？
•
👁 1人浏览过