本文详细介绍了如何在基于`contenteditable`的简易富文本编辑器中实现字体大小调整功能。通过引入html数字输入框和javascript事件监听，用户可以实时修改编辑区域的字体大小。文章强调了`document.execcommand`的局限性和废弃状态，并提供了现代web开发中实现此类功能的替代思路，以构建更健壮的编辑器。
构建可自定义字体大小的Web编辑器
在开发类似Google Docs的富文本编辑器时，允许用户自定义字体大小是一个核心需求。本文将基于一个contenteditable元素，演示如何通过简单的HTML和JavaScript实现这一功能，并探讨相关实现细节与最佳实践。
核心功能实现：字体大小调整
要为用户提供调整字体大小的界面，最直观的方式是使用一个数字输入框。用户可以在其中输入或选择所需的字体大小值。
1. HTML结构
首先，在编辑器界面中添加一个type="number"的输入框，用于接收用户输入的字体大小值。
min="8" max="72" />
在上述代码中：
- id="fontSize" 用于JavaScript中获取该元素。
- value="16" 设置了默认的字体大小。
- min 和 max 属性限制了用户可以设置的字体大小范围。
- fieldset 元素被设置为 contenteditable="true"，这是我们的文本编辑区域。
2. JavaScript逻辑
接下来，我们需要编写JavaScript代码来监听字体大小输入框的变化，并将该变化应用到编辑区域。
// 获取DOM元素
var fontSizeInput = document.querySelector("#fontSize");
var userInputField = document.querySelector(".userInput");
// 为字体大小输入框添加事件监听器
fontSizeInput.addEventListener('input', updateFontSize);
/**
* 当字体大小输入框的值发生变化时，更新编辑区域的字体大小。
* @param {Event} e - input事件对象。
*/
function updateFontSize(e) {
const newSize = e.target.value;
// 将字体大小应用到整个可编辑区域
userInputField.style.fontSize = `${newSize}px`;
}
// 初始化时设置编辑区域的字体大小为输入框的默认值
userInputField.style.fontSize = `${fontSizeInput.value}px`;实现说明：
- 我们通过querySelector获取了字体大小输入框和contenteditable区域的引用。
- fontSizeInput.addEventListener('input', updateFontSize); 监听了输入框的input事件。这意味着每当用户输入或通过上下箭头改变值时，updateFontSize函数就会被调用。
- 在updateFontSize函数中，我们获取了输入框的当前值（e.target.value），并将其作为px单位直接设置到userInputField.style.fontSize属性上。
- 重要提示： 这种实现方式会将字体大小应用到整个contenteditable区域。如果用户期望只修改选中文本的字体大小，则需要更复杂的DOM操作来识别选区并包裹标签，或者使用document.execCommand('fontSize', false, value)（尽管已废弃）。当前示例为了简洁，仅实现了对整个编辑区域的字体大小调整。
关于 document.execCommand 的注意事项
在原始问题中，以及许多旧的富文本编辑器实现中，document.execCo
mmand被广泛用于实现加粗、斜体、下划线、颜色等功能。然而，document.execCommand API 已经被废弃，不推荐在新项目中使用。
为什么不推荐使用 document.execCommand？
- 浏览器兼容性问题： 不同浏览器对execCommand的支持程度和行为存在差异，导致难以实现一致的用户体验。
- 功能有限： 它只能执行预定义的一组命令，对于更复杂的富文本操作（如插入自定义组件、高级样式）力不从心。
- 缺乏精细控制： 难以精确控制DOM的修改，可能导致生成不符合预期的HTML结构。
- 安全隐患： 在某些情况下，不当使用可能引入安全漏洞。
对于加粗、斜体、下划线等功能，虽然本示例代码仍然使用了document.execCommand，但在实际生产环境中，更推荐采用以下现代方法：
- 直接DOM操作： 通过window.getSelection()获取用户选区，然后手动创建或修改DOM元素（如包裹标签并应用CSS样式）。
- 富文本编辑器库： 使用成熟的第三方富文本编辑器库，如Quill、TinyMCE、Slate.js等。这些库提供了强大的API、一致的跨浏览器行为和丰富的功能集，是构建复杂编辑器的首选。
完整示例代码
以下是整合了字体大小调整功能及其他基本格式化功能的完整HTML和JavaScript代码。请注意，为了演示目的，加粗、斜体、下划线和颜色功能仍沿用document.execCommand，但在实际项目中应考虑替换。
简易富文本编辑器
总结与注意事项
- 字体大小实现： 通过和JavaScript监听input事件，可以直接修改contenteditable元素的style.fontSize属性，实现对整个编辑区域字体大小的调整。
- 选中文本的字体大小： 本示例的字体大小功能是针对整个contenteditable区域的。若要实现类似Google Docs那样只改变选中文本的字体大小，需要更复杂的DOM操作来识别和包裹选区，或利用document.execCommand('fontSize', false, value)（但请注意其废弃状态）。
- document.execCommand的废弃： 强烈建议避免在新的Web开发项目中使用document.execCommand。它存在兼容性差、功能有限和控制不足等问题。
- 现代替代方案： 对于更健壮和功能丰富的富文本编辑器，推荐使用直接DOM操作结合window.getSelection()，或者集成专业的富文本编辑器库（如Quill, TinyMCE）。
通过理解这些基本概念和注意事项，您可以开始构建自己的Web富文本编辑器，并逐步添加更高级的功能。
