本文详细介绍了如何在web富文本编辑器中实现用户自定义字体大小功能。我们将探讨如何添加字体大小输入控件，并提供两种实现方式：针对整个编辑区域的字体调整，以及更符合富文本编辑逻辑的、针对选中文本的字体大小修改方案。同时，文章强调了`document.execcommand`的废弃，并建议采用现代dom操作方法。
核心需求：字体大小调整
在构建类似Google Docs的富文本编辑器时，用户通常期望能够选择文本，然后自由调整其字体大小。这需要一个用户界面元素来接收大小值，并结合JavaScript逻辑来应用样式。
UI 控件的添加
首先，我们需要在HTML中添加一个用于输入字体大小的控件。一个类型为number的元素是理想选择，因为它能限制用户输入数字，并且通常带有增减按钮。
这里我们为input设置了min、max和value属性，以提供合理的默认值和范围。fieldset元素被设置为contenteditable="true"，作为我们的文本编辑区域。
document.execCommand的局限性与替代方案
在早期的Web开发中，document.execCommand是一个常用的API，用于执行各种富文本编辑操作，例如加粗、斜体、下划线、设置字体颜色等。然而，document.execCommand已经废弃，不建议在新项目中使用。它的行为在不同浏览器之间可能存在差异，且难以进行精细控制。
对于字体大小调整，虽然理论上可以通过document.execCommand('fontSize', false, '7')（其中'7'是HTML字体大小的抽象值，不直接对应像素）或结合document.execCommand('styleWithCSS', false, true)来尝试设置，但其局限性很大，且无法直接使用像素值。
因此，我们应该转向使用现代DOM操作和Selection API来更精确地控制文本样式。
实现字体大小调整功能
我们将介绍两种实现字体大小调整的方法：一种是简单地改变整个编辑区域的默认字体大小，另一种是更符合富文本编辑器行为的、针对选中文本的字体大小调整。
方法一：调整整个编辑区域的字体大小
这种方法最简单，它会改变contenteditable区域内所有文本的默认字体大小。当用户输入新的字体大小时，编辑区域内的所有文本（包括已有的和新输入的）都会立即更新。
// 获取DOM元素
const fontSizeInput = document.querySelector("#fontSize");
const userInput = document.querySelector('.userInput');
// 初始设置编辑区域的字体大小
userInput.style.fontSize = `${fontSizeInput.value}px`;
// 监听字体大小输入框的变化
fontSizeInput.addEventListener('input', (e) => {
const size = e.target.value;
if (size) {
userInput.style.fontSize = `${size}px`;
}
});优点： 实现简单，代码量少。 缺点： 无法针对选中的特定文本应用样式，不符合富文本编辑器的常规行为。用户无法在同一段文本中拥有不同大小的字体。
方法二：调整选中文本的字体大小 (推荐)
这种方法更符合富文本编辑器的预期行为，即只改变用户当前选中的文本的字体大小。这需要利用window.getSelection()和Range API来获取选中的文本范围，然后对其进行DOM操作。
基本思路是：
- 获取当前用户的文本选择范围。
- 创建一个元素，并设置其font-size样式。
- 将选中的文本内容移动到这个中。
- 将这个插入回原来的位置。
// 获取DOM元素
const fontSizeInput = document.querySelector("#fontSize");
const userInput = document.querySelector('.userInput');
// 函数：应用字体大小到选中的文本
function applyFontSizeToSelection(size) {
const selection = window.getSelection();
if (!selection.rangeCount) return; // 如果没有选中任何文本，则退出
const range = selection.getRangeAt(0); // 获取第一个（也是通常唯一一个）选择范围
// 如果选择范围是折叠的（即光标位置，没有文本被选中）
if (range.collapsed) {
// 在光标位置插入一个带有指定字体大小的空span
const span = document.createElement("span");
span.style.fontSize = `${size}px`;
// 插入一个不间断空格，确保span可见且光标可以进入
span.innerHTML = ' ';
range.insertNode(span);
// 将光标定位到新插入的span内部
range.setStart(span, 0);
range.setEnd(span, 1);
selection.removeAllRanges();
selection.addRange(range);
} else {
// 如果有文本被选中
const span = document.createElement("span");
span.style.fontSize = `${size}px`;
// 将选中的内容从文档中取出，放入新的span中
span.appendChild(range.extractContents());
// 将新的span插入回原来的位置
range.insertNode(span);
// 清除旧的选择，重新选中新插入的span内容
selection.removeAllRanges();
selection.addRange(range);
}
}
// 监听字体大小输入框的变化
fontSizeInput.addEventListener('input', (e) => {
const size = e.target.value;
if (size) {
applyFontSizeToSelection(size);
}
});优点： 实现了富文本编辑器中针对选中文本的字体大小调整，用户体验更佳。 缺点： 相较于方法一，代码逻辑更复杂，需要处理选中范围和DOM操作。
完整代码示例
下面是一个整合了字体大小调整（采用方法二）、加粗、斜体、下划线和高亮功能的完整HTML结构和JavaScript代码。请注意，为了保持与原始问题的连贯性，加粗、斜体和下划线功能仍使用了document.execCommand，但强烈建议在实际项目中将其替换为基于Selection API的现代实现。
富文本编辑器
注意事项与最佳实践
- document.execCommand的替代： 再次强调，尽管示例中为了兼容原始代码保留了部分document.execCommand的用法，但在实际生产环境中，应完全避免使用它。现代的富文本编辑器通常会构建自己的DOM操作逻辑，或者使用成熟的库（如Quill、TinyMCE、ProseMirror等）来处理文本样式。
- 复杂样式处理： 本文提供的字体大小和高亮功能是基础实现。在更复杂的场景中，例如处理嵌套样式（在一个已加粗的文本中改变字体大小）、撤销/重做功能、光标位置管理等，需要更精细的逻辑和状态管理。
- 用户体验： 考虑为用户提供即时反馈，例如当选中不同字体大小的文本时，字体大小输入框能显示当前选中文本的字体大小。这需要更复杂的Selection API操作来遍历选中范围内的DOM节点并提取样式信息。
- 性能优化： 对于大型文档，频繁的DOM操作可能会影响性能。可以考虑使用虚拟DOM或批处理DOM更新来优化。
- 无障碍性（Accessibility）： 确保你的编辑器符合无障碍标准，例如通过键盘导航和屏幕阅读器也能正常使用。
总结
通过本文，我们学习了如何在Web富文本编辑器中实现用户自定义字体大小功能。我们探讨了两种实现方法，并重点推荐了使用window.getSelection()和Range API来针对选中文本进行样式调整，这更符合现代富文本编辑器的设计理念。同时，我们强调了document.execCommand的废弃，并鼓励开发者采用更健壮、可控的DOM操作方法来构建富文本编辑功能。在实际项目中，可以从这些基础功能出发，逐步构建更完善的编辑器，或考虑集成成熟的第三方富文本编辑器库。
