'How would you create a button to format text in a <div> with JS?

I'm trying to make a basic text editor in HTML. I've got an editable div tag so far, and by using keyboard shortcuts, you can format it. However, I want it so that there are a couple of buttons which can bold, italicize, underline and change the color of the text. I'm using basic jQuery and JS for this.

Here's (roughly) my code so far:

$('.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>
javascripthtmljquerycssrich-text-editor


Solution 1:[1]

This is a simple text editor with some simple buttons and keyboard shortcuts . Hope it can help you

<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>

Solution 2:[2]

You can try this approach on 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>

Solution 3:[3]

You can use toggleClass() function to toggle between a class. You can add shortcut keys by adding keyup event for each functionality. Here, I have made alt+i for Italic, alt+b for bold and alt+u for underline. Last but not least you can add <input type="color"> to add color-picker.

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 duy nguy?n tích
Solution 2 Crystal
Solution 3 Sumit Sharma

Related Questions