本文详细阐述如何在web富文本编辑器中实现字体大小调整功能。通过集成数值输入框和javascript事件监听，可以动态控制可编辑区域的字体大小。文章着重指出`document.execcommand`的弃用，并提供了基于现代web标准的实现方法，同时探讨了针对选中文字进行样式调整的复杂性及推荐的解决方案。
引言
构建一个功能丰富的Web富文本编辑器，如Google Docs，需要实现多种文本格式化功能，其中字体大小调整是核心之一。本文将指导您如何在基于contenteditable的编辑器中添加字体大小控制，并讨论在现代Web开发中应避免的旧有方法及其替代方案。
HTML结构：添加字体大小输入框
为了允许用户输入或选择字体大小，我们需要在编辑器界面中添加一个数值输入框。这个输入框将用于接收用户指定的字体大小值。
在上述代码中：
- 我们添加了一个type="number"的元素，其id为fontSize，class为font-size-input。
- min和max属性定义了字体大小的允许范围，value设置了默认值。
- contenteditable="true"的
JavaScript实现：全局字体大小调整
要实现字体大小的动态调整，我们需要通过JavaScript监听字体大小输入框的变化，并将该值应用到可编辑区域。
获取元素引用
首先，在JavaScript中获取对字体大小输入框和可编辑区域的引用：
var fontSizeInput = document.querySelector("#fontSize");
var userInput = document.querySelector('.userInput');事件监听与样式应用
接下来，为字体大小输入框添加一个input事件监听器。当用户改变输入框的值时，我们将更新userInput元素的fontSize样式属性。
fontSizeInput.addEventListener('input', function(event) {
// 获取输入框的当前值
const newSize = event.target.value;
// 将字体大小应用到整个可编辑区域
userInput.style.fontSize = `${newSize}px`;
});重要说明： 上述实现方式会将字体大小应用到整个userInput元素，即改变了整个可编辑区域的默认字体大小。这意味着，如果用户在输入框中输入“20”，整个contenteditable区域的文本都将显示为20像素。这与Google Docs等应用中“选择部分文本并改变其字体大小”的行为有所不同。
document.execCommand的弃用与现代实践
在旧版Web开发中，document.execCommand是实现富文本编辑功能（如加粗、斜体、下划线、颜色、字体大小等）的常用API。例如，改变选中文字的字体大小可以使用document.execCommand('fontSize', false, value)。然而，document.execCommand已被弃用，不推荐在新项目中使用。
其主要问题包括：
- 浏览器兼容性差： 不同浏览器对execCommand的实现存在差异，导致行为不一致。
- 功能受限： 难以实现复杂的样式和更精细的控制。
- 语义化问题： 生成的HTML结构可能不够语义化或冗余。
针对选中文字的样式调整
要实现类似Google Docs中“选择部分文本并改变其字体大小”的功能，需要更复杂的DOM操作，通常涉及window.getSelection()和document.createRange() API来精确地识别和操作用户选中的文本。
基本思路是：
- 获取当前用户选中的Selection对象。
- 从Selection对象中获取Range对象，它表示选中区域的起始和结束位置。
- 根据Range对象，动态创建新的HTML元素（如），并应用所需的CSS样式（font-size）。
- 使用Range的方法（如extractContents()和insertNode()）将新元素插入到DOM中，替换或包裹选中的文本。
这种方法虽然强大，但实现起来较为复杂，需要处理各种边缘情况（如部分选中、跨多个元素选中等）。
推荐的现代解决方案
对于需要复杂富文本编辑功能的项目，强烈建议使用成熟的富文本编辑器库。这些库通常提供了稳定、跨浏览器兼容且功能丰富的API，能够处理各种文本格式化、DOM操作和用户交互。常见的库包括：
- Quill.js
- TinyMCE
- Slate.js
- ProseMirror
这些库不仅能轻松实现字体大小调整，还能处理图片上传、链接插入、撤销/重做等高级功能，大大简化开发工作。
完整代码示例
以下是一个结合了原始问题和答案的优化代码示例，展示了如何添加字体大小控制（全局应用）以及其他基础格式化功能，同时强调了document.execCommand的使用场景（尽管已弃用）。
富文本编辑器
注意事项与最佳实践
- document.execCommand的替代： 尽管在上述示例中为了演示简单功能仍使用了document.execCommand，但在生产环境中应避免使用。对于文本颜色和字体大小等功能，推荐使用Selection和Range API进行更精细的DOM操作，或者直接使用成熟的富文本编辑器库。
- 全局与选中文字样式： 请明确区分是希望改变整个编辑区域的默认样式，还是只改变用户选中的特定文本的样式。本文中的字体大小实现是全局的，而高亮功能是针对选中文字的。
-
用户体验与验证：
- 为字体大小输入框设置合理的min、max和step属性，限制用户输入，提高可用性。
- 考虑添加输入验证，确保用户输入的是有效数值。
- 提供清晰的视觉反馈，例如当应用了某种格式时，对应的按钮应该显示为“选中”状态。
- 可访问性： 确保所有交互元素都具有适当的ARIA属性，并且键盘导航友好，以便所有用户都能轻松使用编辑器。
- 性能优化： 对于大型文档或频繁的DOM操作，注意性能问题。如果需要处理大量文本，考虑使用虚拟DOM或分块渲染等技术。
总结
在Web富文本编辑器中实现字体大小控制是提升用户体验的关键功能。虽然简单的全局字体大小调整可以通过直接修改contenteditable元素的CSS样式来实现，但要实现类似Google Docs中针对选中文字的精细控制，则需要深入理解Selection和Range API，或直接采用功能强大的第三方富文本编辑器库。同时，始终牢记document.execCommand的弃用状态，并优先选择更现代、更健壮的Web API进行开发。
