Implementing a feature for users to select text color in an online editor

Other Questions Google docs
1

I am in the process of developing a web-based editor similar to Google Docs and need assistance with enabling users to select colors for their text. Currently, I have buttons for bold, italic, and underline functionalities, but I do not know how to implement a color selection feature. Ideally, after highlighting the text in the editable area, users should be able to choose a color from the buttons. Right now, I only have a button for red, but I want to expand this to include multiple colors. What is the best way to achieve this?

Here’s the base code I have so far:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Text Color Editor</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button class="btn-bold" onclick="document.execCommand('bold',false,null);">B</button>
    <button class="btn-italic" onclick="document.execCommand('italic',false,null);">I</button>
    <button class="btn-underline" onclick="document.execCommand('underline',false,null);">U</button>
    <button class="btn-red">Make Text Red</button>

    <div class="editable-area" contenteditable="true"></div>

    <script>
      var boldButton = document.querySelector('.btn-bold');
      var italicButton = document.querySelector('.btn-italic');
      var underlineButton = document.querySelector('.btn-underline');

      boldButton.addEventListener('click', function() {
        boldButton.classList.toggle('active');
      });

      italicButton.addEventListener('click', function() {
        italicButton.classList.toggle('active');
      });

      underlineButton.addEventListener('click', function() {
        underlineButton.classList.toggle('active');
      });
    </script>
  </body>
</html>
2

I’ve implemented something similar and found that using a color picker input works really well alongside individual color buttons. You can add <input type="color" id="colorPicker" onchange="document.execCommand('foreColor', false, this.value);"> which gives users access to the full color spectrum instead of being limited to predefined options. For quick access, keep a few common color buttons using the execCommand approach others mentioned, but the color picker provides much more flexibility. Users tend to appreciate having both options - quick preset colors and the ability to choose custom ones. Just make sure to handle the selection properly by checking if text is actually selected before applying the color command, otherwise it might not behave as expected.

3

The execCommand approach works but keep in mind it’s deprecated and may not be supported in future browsers. For a more robust solution, you might want to consider using the Selection API combined with direct DOM manipulation. You can wrap selected text in span elements with inline styles or CSS classes for colors. This gives you better control and future-proofs your editor. For immediate implementation though, the execCommand method will get you started quickly - just be prepared to migrate to a different approach eventually if you plan on maintaining this long-term.

4

just add onclick="document.execCommand('foreColor',false,'red');" to your red button - same pattern as your other buttons. for multiple colors, create more buttons with diferent color values like ‘blue’, ‘green’, etc. the execCommand method handles text coloring just like bold/italic does.