您將如何使用JS創建一個按鈕來格式化中的文本？-有解無憂

我正在嘗試用 HTML 制作一個基本的文本編輯器。到目前為止，我已經有了一個可編輯的 div 標簽，通過使用鍵盤快捷鍵，您可以對其進行格式化。但是，我想要它，以便有幾個按鈕可以加粗、斜體、下劃線和更改文本的顏色。我為此使用了基本的 jQuery 和 JS。

到目前為止，這是（大致）我的代碼：

$('.text-editor').each(function(){
    this.contentEditable = true;
});

div.text-editor {
    width: 200px;
    height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-editor"></div>

uj5u.com熱心網友回復：

這是一個簡單的文本編輯器，帶有一些簡單的按鈕和鍵盤快捷鍵。希望它可以幫助你

<html>
  <head>
    <title>Make simple text editor</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <button type="button" onclick="onItalic()">italic</button>
      <button type="button" onclick="onBold()">bold</button>
      <button type="button" onclick="onUnderline()">underline</button>
    </div>
    <textarea name="example" id="example_id" cols="30" rows="10"></textarea>
    <script>
      const textarea = document.getElementById("example_id");

      function onItalic() {
        textarea.style.fontStyle = "italic";
      }
      function onBold() {
        textarea.style.fontWeight = "bold";
      }
      function onUnderline() {
        textarea.style.textDecoration = "underline";
      }

      function onKeyboardShotcut(e) {
        if (e.ctrlKey && e.key === "i") {
          onItalic();
        } else if (e.ctrlKey && e.key === "b") {
          onBold();
        } else if (e.ctrlKey && e.key === "u") {
          onUnderline();
        }
      }
      document.addEventListener("keyup", onKeyboardShotcut, false);
    </script>
  </body>
</html>

uj5u.com熱心網友回復：

您可以在 jquery 上嘗試這種方法。

$('.text-editor').each(function(){
    this.contentEditable = true;
});

$('.italic').click(function(){
 $('.text-editor').css("font-style", "italic");
 $('.text-editor').css("font-weight", "initial");
 
});

$('.bold').click(function(){
 $('.text-editor').css("font-style", "initial");
   $('.text-editor').css("font-weight", "bold");
 
});

div.text-editor {
    width: 50px;
    height: 50px;
}

.text-editor:focus-within {
  font-style: initial;
  font-weight: initial;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="text-editor">Hello</div>
<button class="italic">Italic</button>
<button class="bold">Bold</button>
</body>

uj5u.com熱心網友回復：

您可以使用toggleClass()函式在類之間切換。您可以通過為每個功能添加 keyup 事件來添加快捷鍵。在這里，我使用alt i斜體、alt b粗體和alt u下劃線。最后但并非最不重要的一點是，您可以添加<input type="color">添加顏色選擇器。

document.addEventListener("keyup", function(e){
if (e.altKey && e.key === "i") {
          $('.text-editor').toggleClass('italic')
        } else if (e.altKey && e.key === "b") {
          $('.text-editor').toggleClass('bold')
        } else if (e.altKey && e.key === "u") {
          $('.text-editor').toggleClass('underline')
        }
}, false);

$('.text-editor').each(function(){
    this.contentEditable = true;
});

$('#italic-text').click(function(){
$('.text-editor').toggleClass('italic')
});

$('#bold-text').click(function(){
$('.text-editor').toggleClass('bold')
});

$('#underline-text').click(function(){
$('.text-editor').toggleClass('underline')
});

$('#color-picker').change(function() {
$('.text-editor').css('color', $(this).val())
})

div.text-editor {
    width: 150px;
    height: 150px;
}

.bold {
  font-weight: bolder;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

#color-picker {
  height: 21px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="text-editor">Text Editor</div>
<button id="italic-text">Italic</button>
<button id="bold-text" >Bold</button>
<button id="underline-text" >Underline</button>
<input type="color" id="color-picker" value="#fff">
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/474060.html

標籤：javascript html jQuery css 富文本编辑器

上一篇：取消隱藏按鈕clic上的h1標簽

下一篇：高度繼承不適用于絕對位置