答案：通过contenteditable启用编辑，结合execcommand执行格式化，绑定按钮操作实现加粗、斜体、链接等，利用innerhtml获取内容并保存，配合事件监听与range api增强交互。
实现一个 JavaScript 富文本编辑器，核心是利用浏览器原生的 contenteditable 属性结合 Document.execCommand（或现代的 Selection 和 Range API）来捕获用户输入并施加格式。虽然 execCommand 已被弃用，但在许多实际场景中仍广泛使用。以下是实现的基本思路和关键步骤。
启用 contenteditable
让任意元素变成可编辑区域：
这个 div 现在可以像 textarea 一样输入内容，同时支持内联 HTML 标签如 、 等。
绑定工具栏按钮
创建一组按钮用于加粗、斜体、插入链接等操作：
立即学习“Java免费学习笔记（深入）”；
为按钮添加事件监听：
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 二次开发，但理解原生实现有助于更好地驾驭高级库。
