Web编辑器如何调整字体大小设置

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《Web编辑器自定义字体大小设置方法》，涉及到，有需要的可以收藏一下

本文详细介绍了如何在Web富文本编辑器中实现用户自定义字体大小功能。我们将探讨如何添加字体大小输入控件，并提供两种实现方式：针对整个编辑区域的字体调整，以及更符合富文本编辑逻辑的、针对选中文本的字体大小修改方案。同时，文章强调了`document.execCommand`的废弃，并建议采用现代DOM操作方法。

核心需求：字体大小调整

在构建类似Google Docs的富文本编辑器时，用户通常期望能够选择文本，然后自由调整其字体大小。这需要一个用户界面元素来接收大小值，并结合JavaScript逻辑来应用样式。

UI 控件的添加

首先，我们需要在HTML中添加一个用于输入字体大小的控件。一个类型为number的元素是理想选择，因为它能限制用户输入数字，并且通常带有增减按钮。

选择字体大小 (px)

  这是一段可编辑的文本。请尝试选择并调整字体大小。

这里我们为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操作。

基本思路是：

1. 获取当前用户的文本选择范围。
2. 创建一个元素，并设置其font-size样式。
3. 将选中的文本内容移动到这个中。
4. 将这个插入回原来的位置。

// 获取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的现代实现。

  
    
    
    
  
  
    
    
      B
    

    
      I
    

    
      U
    

    
    选择颜色

    高亮

    
    选择字体大小 (px)

    
    

      
这是一段可编辑的文本。请尝试选择并调整字体大小、颜色、加粗等样式。
      
粗体文本 斜体文本 下划线文本
    

    
  

注意事项与最佳实践

1. document.execCommand的替代： 再次强调，尽管示例中为了兼容原始代码保留了部分document.execCommand的用法，但在实际生产环境中，应完全避免使用它。现代的富文本编辑器通常会构建自己的DOM操作逻辑，或者使用成熟的库（如Quill、TinyMCE、ProseMirror等）来处理文本样式。
2. 复杂样式处理： 本文提供的字体大小和高亮功能是基础实现。在更复杂的场景中，例如处理嵌套样式（在一个已加粗的文本中改变字体大小）、撤销/重做功能、光标位置管理等，需要更精细的逻辑和状态管理。
3. 用户体验： 考虑为用户提供即时反馈，例如当选中不同字体大小的文本时，字体大小输入框能显示当前选中文本的字体大小。这需要更复杂的Selection API操作来遍历选中范围内的DOM节点并提取样式信息。
4. 性能优化： 对于大型文档，频繁的DOM操作可能会影响性能。可以考虑使用虚拟DOM或批处理DOM更新来优化。
5. 无障碍性（Accessibility）： 确保你的编辑器符合无障碍标准，例如通过键盘导航和屏幕阅读器也能正常使用。

总结

通过本文，我们学习了如何在Web富文本编辑器中实现用户自定义字体大小功能。我们探讨了两种实现方法，并重点推荐了使用window.getSelection()和Range API来针对选中文本进行样式调整，这更符合现代富文本编辑器的设计理念。同时，我们强调了document.execCommand的废弃，并鼓励开发者采用更健壮、可控的DOM操作方法来构建富文本编辑功能。在实际项目中，可以从这些基础功能出发，逐步构建更完善的编辑器，或考虑集成成熟的第三方富文本编辑器库。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Web编辑器如何调整字体大小设置》文章吧，也可关注golang学习网公众号了解相关技术文章。