如何在按鈕單擊時將項目符號點添加到字段集？

Question

我正在制作一個類似網站的谷歌文檔，我目前正在制作一個按鈕，單擊該按鈕將在 cursor 的位置添加一個項目符號點。 我嘗試了 execommand，但這對我不起作用。 我不希望每次點擊回車鍵都有一個要點，就像這個網站上的其他一些帖子一樣。

這是我的 HTML5 代碼：

<!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"
      >
        𝗕
      </button>

      <button
        class="italic"
        onclick="document.execCommand('italic',false,null);"
        title="Italic"
      >
        𝘐
      </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>

這是我的 JavaScript 代碼：

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

Answer 1

您可以在此處找到可用於 .execCommand 的命令列表。 有 insertUnorderedList 命令可能會為您解決問題。

除此之外，您始終可以使用 Javascript 實現所需的功能，但您可能需要對此進行額外研究。

如何在按鈕單擊時將項目符號點添加到字段集？

問題描述

1 個解決方案

解決方案1
0 2022-08-08 12:11:39

如何在按鈕單擊時將項目符號點添加到字段集？

問題描述

1 個解決方案

解決方案1 0 2022-08-08 12:11:39

解決方案1
0 2022-08-08 12:11:39