在可编辑 Fieldset 中通过按钮点击添加项目符号

技术教程
2025-10-24 09:43:14

在可编辑 fieldset 中通过按钮点击添加项目符号

本文旨在提供一种在可编辑的 `fieldset` 元素中，通过点击按钮添加项目符号的实现方法。我们将探讨如何利用 `insertUnorderedList` 命令以及 J*aScript 来实现这一功能，并提供示例代码帮助读者理解和应用。最终目标是创建一个类似 Google Docs 的文本编辑器，并实现其项目符号功能。

使用 insertUnorderedList 命令

Document.execCommand() 方法允许你运行编辑命令来操作可编辑区域的内容。其中，insertUnorderedList 命令可以方便地在光标所在位置插入一个无序列表。

以下是如何在你的 J*aScript 代码中使用 insertUnorderedList 命令：

var bulletPointBtn = document.querySelector("#bullet point");

bulletPointBtn.addEventListener("click", function () {
  document.execCommand("insertUnorderedList", false, null);
});

这段代码首先获取了带有 id "bullet point" 的按钮元素。然后，它添加了一个点击事件监听器，当按钮被点击时，执行 document.execCommand("insertUnorderedList", false, null)。这将会在 fieldset 中光标所在的位置创建一个无序列表，或者将选中的文本转换为列表项。

完整示例代码

下面是包含上述代码的完整 HTML 和 J*aScript 示例：

Spirit Me

SpiritMe允许用户使用数字化身制作视频，这些化身可以模拟用户的声音和情感

178 查看详情 Spirit Me

HTML (index.html):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Editor</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="buttons">
      <button
        class="bold"
        onclick="document.execCommand('bold',false,null);"
        title="Bold"
      >
        B
      </button>

      <button
        class="italic"
        onclick="document.execCommand('italic',false,null);"
        title="Italic"
      >
        I
      </button>

      <button
        class="underline"
        onclick="document.execCommand('underline',false,null);"
        title="Underline"
      >
        U̲
      </button>

      <input
        type="color"
        class="color-picker"
        id="colorPicker"
        oninput="changeColorText(this.value);"
        title="Change text color"
      />

      <button id="highlight"><mark>Highlight</mark></button>

      <button id="bullet point">•</button>
    </div>

    <fieldset class="userInput" contenteditable="true"></fieldset>
    <script src="use.js"></script>
  </body>
</html>

J*aScript (use.js):

var boldBtn = document.querySelector(".bold");
var italicBtn = document.querySelector(".italic");
var underlineBtn = document.querySelector(".underline");
var colorPicker = document.querySelector(".color-picker");
var highlightBtn = document.querySelector("#highlight");
var bulletPointBtn = document.querySelector("#bullet point");

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");
});

const changeColorText = (color) => {
  document.execCommand("styleWithCSS", false, true);
  document.execCommand("foreColor", false, color);
};

document.getElementById("highlight").addEventListener("click", function () {
  var range = window.getSelection().getRangeAt(0),
    span = document.createElement("span");

  span.className = "highlight";
  span.appendChild(range.extractContents());
  range.insertNode(span);
});

bulletPointBtn.addEventListener("click", function () {
  document.execCommand("insertUnorderedList", false, null);
});

注意事项

浏览器兼容性： 虽然 execCommand 方法被广泛支持，但不同的浏览器可能对某些命令有不同的实现。建议在使用前测试目标浏览器的兼容性。可以参考 MDN 文档获取更详细的浏览器兼容性信息。
光标位置： insertUnorderedList 命令会在光标当前位置插入列表。确保光标位于 fieldset 中，并且你希望列表开始的位置。
样式定制： 默认的列表样式可能不符合你的设计需求。你可以使用 CSS 来自定义列表的外观，例如更改项目符号的类型、间距等。