在javascript中实现富文本编辑器加粗功能，最简单方式是使用contenteditable配合document.execcommand('bold')，需确保编辑器已聚焦，该命令会为选中文本添加或标签。
在 JavaScript 中实现富文本编辑器的基础加粗功能，核心是利用浏览器原生的 document.execCommand()（旧标准）或更现代的 Document.execCommand() 替代方案（如 Selection + Range 操作 DOM），但最简单、兼容性好且适合初学者的方式仍是基于 contenteditable 和 execCommand。
1. 创建可编辑区域
先准备一个支持富文本编辑的容器：
<div id="editor" contenteditable="true" style="border: 1px solid #ccc; min-height: 150px; padding: 10px;"> 请选中文字后点击加粗按钮 </div> <button id="boldBtn">加粗（B）</button>
2. 绑定加粗按钮事件
点击按钮时，让当前光标所在或选中的文字加粗：
document.getElementById('boldBtn').addEventListener('click', () => {
document.execCommand('bold', false, null);
});
✅ 这行代码会自动作用于当前焦点内的 contenteditable 元素中被选中的文本；若无选中内容，则对光标插入点后续输入的文字生效（部分浏览器行为略有差异）。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
3. 注意兼容性与实际效果
execCommand 已被标记为过时（deprecated），但在所有主流浏览器中仍完全可用，适合教学和轻量需求。它底层通常生成 <strong></strong> 或 <b></b> 标签（取决于浏览器策略）。
- 加粗后 HTML 可能变成：
<strong>这段文字</strong> - 若想统一用
<strong></strong>，可在获取编辑器 HTML 后做后处理（如正则替换<b></b>） - 注意：必须确保编辑器已获得焦点，否则命令可能无效 —— 可加一行
editor.focus()主动聚焦
4. 补充：实时检测当前是否加粗（用于按钮高亮）
想让「加粗」按钮根据当前选区状态切换样式（如变蓝），可用 document.queryCommandState()：
function updateBoldButton() {
const btn = document.getElementById('boldBtn');
if (document.queryCommandState('bold')) {
btn.style.backgroundColor = '#007bff';
} else {
btn.style.backgroundColor = '';
}
}
document.getElementById('editor').addEventListener('input', updateBoldButton);
document.getElementById('editor').addEventListener('selectionchange', updateBoldButton);
不复杂但容易忽略：加粗只是富文本的第一步，后续可类比实现斜体、下划线、列表等，底层逻辑高度一致。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
