Web富文本编辑器：实现用户自定义字体大小功能-html教程-PHP中文网

Web富文本编辑器：实现用户自定义字体大小功能

本文详细介绍了如何在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来更精确地控制文本样式。

实现字体大小调整功能

我们将介绍两种实现字体大小调整的方法：一种是简单地改变整个编辑区域的默认字体大小，另一种是更符合富文本编辑器行为的、针对选中文本的字体大小调整。

AI图像编辑器

使用文本提示编辑、变换和增强照片

查看详情

方法一：调整整个编辑区域的字体大小

这种方法最简单，它会改变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操作方法来构建富文本编辑功能。在实际项目中，可以从这些基础功能出发，逐步构建更完善的编辑器，或考虑集成成熟的第三方富文本编辑器库。

以上就是Web富文本编辑器：实现用户自定义字体大小功能的详细内容，更多请关注php中文网其它相关文章！