用 document.execcommand() 是最轻量、兼容性好且无需手动处理 html 结构的方式，适合简易富文本编辑；需先聚焦 contenteditable 区域再执行命令，并注意其已过时但简易场景仍可用。
用 document.execCommand() 是最轻量、兼容性好且无需手动处理 HTML 结构的方式，适合简易富文本编辑（如留言框、简易笔记）。现代项目推荐用 contenteditable + 命令 API，而不是直接操作 innerHTML 或创建元素。
1. 创建可编辑区域与工具栏按钮
先准备一个带 contenteditable="true" 的容器，再加两个按钮触发加粗（bold）和斜体（italic）：
<div id="editor" contenteditable="true" style="min-height: 100px; border: 1px solid #ccc; padding: 8px;"></div> <button id="btn-bold">B</button> <button id="btn-italic">I</button>
2. 绑定点击事件并执行命令
点击按钮时，先确保编辑器获得焦点，再调用 execCommand。注意：该 API 要求文档处于“已激活”状态，所以必须聚焦后再执行：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const editor = document.getElementById('editor');
const btnBold = document.getElementById('btn-bold');
const btnItalic = document.getElementById('btn-italic');
btnBold.addEventListener('click', () => {
editor.focus();
document.execCommand('bold', false, null);
});
btnItalic.addEventListener('click', () => {
editor.focus();
document.execCommand('italic', false, null);
});
3. 补充说明与注意事项
execCommand 会自动包裹选中文本（或在光标处插入格式化标签），生成的 HTML 通常是 <strong></strong> 或 <em></em>，语义正确且浏览器原生支持。
- 不支持自定义样式（如颜色、字体），仅限内置命令；
- 在现代 Chrome/Firefox/Edge 中仍可用，但已被标记为“过时”，W3C 不再维护 —— 简易场景够用，复杂编辑器建议迁移到 Draft.js 或 Tiptap；
- 若需兼容 Safari 旧版本，可加
document.queryCommandState('bold')判断当前是否已加粗，用于按钮高亮； - 避免在非聚焦状态下调用，否则无效 —— 所以
focus()是必需步骤。
4. 可选：添加快捷键支持（Ctrl+B / Ctrl+I）
增强体验，监听 keydown 事件即可：
editor.addEventListener('keydown', (e) => {
if (e.ctrlKey || e.metaKey) {
if (e.key === 'b') {
e.preventDefault();
document.execCommand('bold', false, null);
} else if (e.key === 'i') {
e.preventDefault();
document.execCommand('italic', false, null);
}
}
});
不复杂但容易忽略聚焦和 preventDefault —— 写对这两点，加粗斜体就稳了。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
