本文详细介绍了如何在基于`contenteditable`的简易富文本编辑器中实现字体大小调整功能。通过引入html数字输入框和javascript事件监听，用户可以实时修改编辑区域的字体大小。文章强调了`document.execcommand`的局限性和废弃状态，并提供了现代web开发中实现此类功能的替代思路，以构建更健壮的编辑器。
构建可自定义字体大小的Web编辑器
在开发类似Google Docs的富文本编辑器时，允许用户自定义字体大小是一个核心需求。本文将基于一个contenteditable元素，演示如何通过简单的HTML和JavaScript实现这一功能，并探讨相关实现细节与最佳实践。
核心功能实现：字体大小调整
要为用户提供调整字体大小的界面，最直观的方式是使用一个数字输入框。用户可以在其中输入或选择所需的字体大小值。
1. HTML结构
首先，在编辑器界面中添加一个type="number"的输入框，用于接收用户输入的字体大小值。
<input type="number" class="font-size" id="fontSize" value="16" <!-- 可以设置一个默认值 --> min="8" <!-- 最小字体大小 --> max="72" <!-- 最大字体大小 --> /> <label for="fontSize">选择字体大小</label> <fieldset class="userInput" contenteditable="true"> <!-- 用户可编辑的内容区域 --> 这是一段可编辑的文本。 </fieldset>
在上述代码中：
- 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操作来识别选区并包裹<span>标签，或者使用document.execCommand('fontSize', false, value)（尽管已废弃）。当前示例为了简洁，仅实现了对整个编辑区域的字体大小调整。
关于 document.execCommand 的注意事项
在原始问题中，以及许多旧的富文本编辑器实现中，document.execCommand被广泛用于实现加粗、斜体、下划线、颜色等功能。然而，document.execCommand API 已经被废弃，不推荐在新项目中使用。
为什么不推荐使用 document.execCommand？
- 浏览器兼容性问题： 不同浏览器对execCommand的支持程度和行为存在差异，导致难以实现一致的用户体验。
- 功能有限： 它只能执行预定义的一组命令，对于更复杂的富文本操作（如插入自定义组件、高级样式）力不从心。
- 缺乏精细控制： 难以精确控制DOM的修改，可能导致生成不符合预期的HTML结构。
- 安全隐患： 在某些情况下，不当使用可能引入安全漏洞。
对于加粗、斜体、下划线等功能，虽然本示例代码仍然使用了document.execCommand，但在实际生产环境中，更推荐采用以下现代方法：
- 直接DOM操作： 通过window.getSelection()获取用户选区，然后手动创建或修改DOM元素（如包裹<span>标签并应用CSS样式）。
- 富文本编辑器库： 使用成熟的第三方富文本编辑器库，如Quill、TinyMCE、Slate.js等。这些库提供了强大的API、一致的跨浏览器行为和丰富的功能集，是构建复杂编辑器的首选。
完整示例代码
以下是整合了字体大小调整功能及其他基本格式化功能的完整HTML和JavaScript代码。请注意，为了演示目的，加粗、斜体、下划线和颜色功能仍沿用document.execCommand，但在实际项目中应考虑替换。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>简易富文本编辑器</title>
<link rel="stylesheet" href="index.css" /> <!-- 假设有基本的CSS样式 -->
<style>
/* 简单的CSS样式，用于高亮和按钮状态 */
body { font-family: sans-serif; margin: 20px; }
.userInput {
border: 1px solid #ccc;
padding: 10px;
min-height: 200px;
margin-top: 10px;
font-size: 16px; /* 默认字体大小 */
}
button {
padding: 8px 12px;
margin-right: 5px;
cursor: pointer;
}
button.inUse {
background-color: #e0e0e0;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<button class="bold" onclick="document.execCommand('bold',false,null);">
<strong>B</strong>
</button>
<button class="italic" onclick="document.execCommand('italic',false,null);">
<em>I</em>
</button>
<button
class="underline"
onclick="document.execCommand('underline',false,null);"
>
<u>U</u>
</button>
<input
type="color"
class="color-picker"
id="colorPicker"
oninput="changeTextColor(this.value);"
/>
<label for="colorPicker">选择文本颜色</label>
<button id="highlight">高亮</button>
<input
type="number"
class="font-size"
id="fontSize"
value="16"
min="8"
max="72"
/>
<label for="fontSize">选择字体大小</label>
<fieldset class="userInput" contenteditable="true">
这是一段可编辑的文本。尝试改变字体大小、颜色、加粗等。
</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 userInputField = document.querySelector('.userInput');
// 按钮状态切换（视觉反馈）
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");
});
/**
* 改变选中文本的颜色。
* @param {string} color - 颜色值。
*/
const changeTextColor = (color) => {
// 'styleWithCSS' 确保使用CSS样式而不是HTML标签
document.execCommand("styleWithCSS", false, true);
document.execCommand("foreColor", false, color);
};
/**
* 当字体大小输入框的值发生变化时，更新编辑区域的字体大小。
* @param {Event} e - input事件对象。
*/
function updateFontSize(e) {
const newSize = e.target.value;
userInputField.style.fontSize = `${newSize}px`;
}
// 监听字体大小输入框的变化
fontSizeInput.addEventListener('input', updateFontSize);
// 初始化时设置编辑区域的字体大小为输入框的默认值
userInputField.style.fontSize = `${fontSizeInput.value}px`;
// 高亮功能
document
.getElementById("highlight")
.addEventListener("click", function () {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
var span = document.createElement("span");
span.className = "highlight";
span.appendChild(range.extractContents());
range.insertNode(span);
}
});
</script>
</body>
</html>总结与注意事项
- 字体大小实现： 通过<input type="number">和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富文本编辑器，并逐步添加更高级的功能。
