本文详细介绍了如何在web富文本编辑器中实现用户自定义字体大小功能。我们将探讨如何添加字体大小输入控件，并提供两种实现方式：针对整个编辑区域的字体调整，以及更符合富文本编辑逻辑的、针对选中文本的字体大小修改方案。同时，文章强调了`document.execcommand`的废弃，并建议采用现代dom操作方法。
核心需求：字体大小调整
在构建类似Google Docs的富文本编辑器时，用户通常期望能够选择文本，然后自由调整其字体大小。这需要一个用户界面元素来接收大小值，并结合JavaScript逻辑来应用样式。
UI 控件的添加
首先，我们需要在HTML中添加一个用于输入字体大小的控件。一个类型为number的<input>元素是理想选择，因为它能限制用户输入数字，并且通常带有增减按钮。
<input type="number" class="font-size-input" id="fontSize" min="8" max="72" value="16" /> <label for="fontSize">选择字体大小 (px)</label> <fieldset class="userInput" contenteditable="true"> 这是一段可编辑的文本。请尝试选择并调整字体大小。 </fieldset>
这里我们为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操作。
基本思路是：
- 获取当前用户的文本选择范围。
- 创建一个<span>元素，并设置其font-size样式。
- 将选中的文本内容移动到这个<span>中。
- 将这个<span>插入回原来的位置。
// 获取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的现代实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>富文本编辑器</title>
<style>
body { font-family: sans-serif; }
.userInput {
border: 1px solid #ccc;
min-height: 200px;
padding: 10px;
margin-top: 10px;
outline: none;
background-color: #f9f9f9;
}
button {
padding: 8px 12px;
margin: 5px;
cursor: pointer;
border: 1px solid #ddd;
background-color: #eee;
border-radius: 3px;
}
button.inUse {
background-color: #cceeff;
border-color: #99ddff;
}
.highlight {
background-color: yellow;
}
input[type="color"], input[type="number"] {
margin: 5px;
padding: 5px;
border: 1px solid #ddd;
border-radius: 3px;
}
label {
margin-left: 5px;
}
</style>
</head>
<body>
<!-- 编辑器工具栏 -->
<button class="bold" onclick="document.execCommand('bold',false,null);">
<b>B</b>
</button>
<button class="italic" onclick="document.execCommand('italic',false,null);">
<i>I</i>
</button>
<button
class="underline"
onclick="document.execCommand('underline',false,null);"
>
<u>U</u>
</button>
<input
type="color"
class="color-picker"
id="colorPicker"
oninput="changeColorText(this.value);"
/>
<label for="colorPicker">选择颜色</label>
<button id="highlight">高亮</button>
<input
type="number"
class="font-size-input"
id="fontSize"
min="8" max="72" value="16"
/>
<label for="fontSize">选择字体大小 (px)</label>
<!-- 可编辑区域 -->
<fieldset class="userInput" contenteditable="true">
<p>这是一段可编辑的文本。请尝试选择并调整字体大小、颜色、加粗等样式。</p>
<p><b>粗体文本</b> <i>斜体文本</i> <u>下划线文本</u></p>
</fieldset>
<script>
// 获取DOM元素
var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var fontSizeInput = document.querySelector("#fontSize"); // 修正变量名
var highlightBtn = document.querySelector("#highlight");
var userInput = document.querySelector('.userInput');
// 按钮状态切换（仅UI效果，不影响实际样式应用）
boldBtn.addEventListener("click", function () {
boldBtn.classList.toggle("inUse");
});
italicBtn.addEventListener("click", function () {
italicBtn.classList.toggle("inUse");
});
underlineBtn.addEventListener("click", function () {
underlineBtn.classList.toggle("inUse");
});
highlightBtn.addEventListener("click", function () {
highlightBtn.classList.toggle("inUse");
});
// 字体颜色更改功能 (使用 document.execCommand，已废弃)
const changeColorText = (color) => {
document.execCommand("styleWithCSS", false, true); // 允许使用CSS样式
document.execCommand("foreColor", false, color);
};
// 高亮功能 (使用 Selection API 和 DOM 操作)
document
.getElementById("highlight")
.addEventListener("click", function () {
var selection = window.getSelection();
if (!selection.rangeCount) return;
var range = selection.getRangeAt(0);
if (range.collapsed) return; // 如果没有选中内容，则不执行高亮
var span = document.createElement("span");
span.className = "highlight";
span.appendChild(range.extractContents()); // 将选中内容移动到新创建的span中
range.insertNode(span); // 将span插入回文档
// 重新选择高亮后的内容
selection.removeAllRanges();
selection.addRange(range);
});
// 字体大小调整功能 (使用 Selection API 和 DOM 操作)
function applyFontSizeToSelection(size) {
const selection = window.getSelection();
if (!selection.rangeCount) return;
const range = selection.getRangeAt(0);
if (range.collapsed) { // 光标位置，没有文本被选中
const span = document.createElement("span");
span.style.fontSize = `${size}px`;
span.innerHTML = ' '; // 插入不间断空格
range.insertNode(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.appendChild(range.extractContents());
range.insertNode(span);
selection.removeAllRanges();
selection.addRange(range);
}
}
// 监听字体大小输入框的变化
fontSizeInput.addEventListener('input', (e) => {
const size = e.target.value;
if (size) {
applyFontSizeToSelection(size);
}
});
</script>
</body>
</html>注意事项与最佳实践
- document.execCommand的替代： 再次强调，尽管示例中为了兼容原始代码保留了部分document.execCommand的用法，但在实际生产环境中，应完全避免使用它。现代的富文本编辑器通常会构建自己的DOM操作逻辑，或者使用成熟的库（如Quill、TinyMCE、ProseMirror等）来处理文本样式。
- 复杂样式处理： 本文提供的字体大小和高亮功能是基础实现。在更复杂的场景中，例如处理嵌套样式（在一个已加粗的文本中改变字体大小）、撤销/重做功能、光标位置管理等，需要更精细的逻辑和状态管理。
- 用户体验： 考虑为用户提供即时反馈，例如当选中不同字体大小的文本时，字体大小输入框能显示当前选中文本的字体大小。这需要更复杂的Selection API操作来遍历选中范围内的DOM节点并提取样式信息。
- 性能优化： 对于大型文档，频繁的DOM操作可能会影响性能。可以考虑使用虚拟DOM或批处理DOM更新来优化。
- 无障碍性（Accessibility）： 确保你的编辑器符合无障碍标准，例如通过键盘导航和屏幕阅读器也能正常使用。
总结
通过本文，我们学习了如何在Web富文本编辑器中实现用户自定义字体大小功能。我们探讨了两种实现方法，并重点推荐了使用window.getSelection()和Range API来针对选中文本进行样式调整，这更符合现代富文本编辑器的设计理念。同时，我们强调了document.execCommand的废弃，并鼓励开发者采用更健壮、可控的DOM操作方法来构建富文本编辑功能。在实际项目中，可以从这些基础功能出发，逐步构建更完善的编辑器，或考虑集成成熟的第三方富文本编辑器库。
