javascript - How to build an own WYSIWYG editor (RTE) using Vanilla JS

I don't want to use Jquery. I want to solve this in vanilla JS. Please help me!

Description: How to make selected text bold/italic/underline on clicking a button in JavaScript?

Here is my HTML.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./style/style.css" />
        <link rel="stylesheet" href=".10.0/css/all.css" 
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" 
        crossorigin="anonymous" />
        <title>TextEditor</title>
    </head>
    
    <body>
        <header>
          <h1>Text Editor</h1>
        </header>
        <main>
            <div class="functionality">
                <div class="container">
                    <button class="btn" id="bold"><i class="fas fa-bold"></i></button>
                    <button class="btn" id="italic"><i class="fas fa-italic"></i></button>
                    <button class="btn" id="underline"><i class="fas fa-underline"></i></button>
                    <button class="btn" id="align-left"><i class="fas fa-align-left"></i></button>
                    <button class="btn" id="justify"><i class="fas fa-align-justify"></i></button>
                    <button class="btn" id="align-right"><i class="fas fa-align-right"></i></button>
                </div>
            </div>
            <div class="input-container">
                <textarea contenteditable="true" name="text-input-c1" id="text-input" rows="3"> 
                </textarea>
            </div>
        </main>
    </body>
    <script src="./script.js"></script>
    
    </html>

I don't want to use Jquery. I want to solve this in vanilla JS. Please help me!

Description: How to make selected text bold/italic/underline on clicking a button in JavaScript?

Here is my HTML.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./style/style.css" />
        <link rel="stylesheet" href="https://pro.fontawesome./releases/v5.10.0/css/all.css" 
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" 
        crossorigin="anonymous" />
        <title>TextEditor</title>
    </head>
    
    <body>
        <header>
          <h1>Text Editor</h1>
        </header>
        <main>
            <div class="functionality">
                <div class="container">
                    <button class="btn" id="bold"><i class="fas fa-bold"></i></button>
                    <button class="btn" id="italic"><i class="fas fa-italic"></i></button>
                    <button class="btn" id="underline"><i class="fas fa-underline"></i></button>
                    <button class="btn" id="align-left"><i class="fas fa-align-left"></i></button>
                    <button class="btn" id="justify"><i class="fas fa-align-justify"></i></button>
                    <button class="btn" id="align-right"><i class="fas fa-align-right"></i></button>
                </div>
            </div>
            <div class="input-container">
                <textarea contenteditable="true" name="text-input-c1" id="text-input" rows="3"> 
                </textarea>
            </div>
        </main>
    </body>
    <script src="./script.js"></script>
    
    </html>

Share Improve this question edited Apr 9, 2021 at 17:59 Björn 5351 gold badge4 silver badges16 bronze badges asked Apr 9, 2021 at 12:43 Abubakar Shafique 793 silver badges8 bronze badges

1 You cannot add styling to plain old textarea directly. – Ratul Sharker Commented Apr 9, 2021 at 13:02
For more info take a look into mozilla's rich text editor guide – Ratul Sharker Commented Apr 9, 2021 at 13:16
1 Hey Abubakar, great to see your first contribution. To get even more answers, it would be great to not just ask for help. Always provide the solution you have found so far. Or your ideas regarding the solution. Just asking for help feels like you haven't tried it for yourself. If you are unsure/ not skilled enough (right now), always ask yourself using a framework/ library like quilljs.. – Björn Commented Apr 9, 2021 at 15:44
@BjörnvonTRITUM I tried many times to solve this unfortunately I didn't succeed. I don't want to use the other libraries/framework like(quillijs/CKEditor5) to solve this because I want to solve this with javascript. :) – Abubakar Shafique Commented Apr 9, 2021 at 15:54
If a found any way to solve this, i will post here. :) – Abubakar Shafique Commented Apr 9, 2021 at 15:55

| Show 3 more ments

3 Answers 3

Sorted by: Reset to default 4

I think it is a possible solution.

I wrote a function to not replicate the code.
You can modify it to fit your problem and also I apply the function to just italic, bold and underline the css style. The align buttons will not work, you have to implement the logic but it's very similar as this function
You can try apply another function to remove the style when click again in the button.

As said before, the textarea not allow modify style of some part of the text, so I'm using span to avoid issues. I try div but I got some unlike behaviors.

function addEventEditionButton(btnId,cssProperty, cssPropertieValy) {
  let buttonTarget = document.getElementById(btnId);
  buttonTarget.addEventListener("click", function () {
    let selection = window.getSelection().getRangeAt(0);
    let selectedText = selection.extractContents();
    let span = document.createElement("span");
    try{
        span.style[cssProperty] = cssPropertieValy;
    }catch(e){
        console.trace(e);
    }    
    span.appendChild(selectedText);
    selection.insertNode(span);
  });
}

addEventEditionButton("bold", "fontWeight", "bold");
addEventEditionButton("italic", "fontStyle", "italic");
addEventEditionButton("underline", "textDecoration", "underline");

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <link rel="stylesheet" href="./style/style.css" /> -->
    <link
      rel="stylesheet"
      href="https://pro.fontawesome./releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
    />
    <title>TextEditor</title>
    <style>
      .input-container {
        border: 1px solid black;
        width: 223px;
        height: 103px;
        overflow: scroll;
      }
    </style>
  </head>

  <body>
    <header>
      <h1>Text Editor</h1>
    </header>
    <main>
      <div class="functionality">
        <div class="container">
          <button class="btn" id="bold"><i class="fas fa-bold"></i></button>
          <button class="btn" id="italic"><i class="fas fa-italic"></i></button>
          <button class="btn" id="underline">
            <i class="fas fa-underline"></i>
          </button>
          <button class="btn" id="align-left">
            <i class="fas fa-align-left"></i>
          </button>
          <button class="btn" id="justify">
            <i class="fas fa-align-justify"></i>
          </button>
          <button class="btn" id="align-right">
            <i class="fas fa-align-right"></i>
          </button>
        </div>
      </div>
      <div contenteditable class="input-container">
        <span name="text-input-c1" id="text-input"></span>
      </div>
    </main>
  </body>
  <script src="./stackoverflow.js"></script>
</html>

Be aware in this HTML chages:

<div contenteditable class="input-container">
    <span name="text-input-c1" id="text-input"></span>
</div>

My suggestion:

const formatText = (tag) => {
  var start = textarea.selectionStart,
    end = textarea.selectionEnd,
    len = textarea.value.length,
    text = textarea.value.substring(start, end);
  if (text) textarea.value = textarea.value.substring(0, start) + `<${tag}>${text}</${tag}>` + textarea.value.substring(end, len);
}

form {
  display: flex;
  flex-direction: column;
}

textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}

button {
  margin-bottom: 20px;
}

<form id="form">
  <textarea id="textarea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean venenatis justo ante, sed condimentum dui lobortis nec. Morbi ut aliquam turpis. Aliquam elementum urna diam. Morbi ullamcorper dolor ipsum, quis porttitor tortor bibendum nec. Donec imperdiet neque nec est faucibus, ac congue ligula hendrerit. Cras quis metus ullamcorper, modo est vel, elementum nulla. In hac habitasse platea dictumst. Morbi posuere pulvinar tellus, quis tincidunt felis condimentum at. Maecenas eu molestie lorem. Nullam finibus luctus mauris, ut tincidunt diam ultrices id. Curabitur vitae vehicula mi, et tincidunt nulla. Sed vitae rhoncus sem, quis aliquet quam. Etiam dignissim lacus eget ex dictum scelerisque. Quisque id ornare odio, non placerat odio.
</textarea>
  <button type="button" onclick="formatText('i');">Italic</button>
  <button type="button" onclick="formatText('b');">Bold</button>
  <button type="button" onclick="formatText('u');">Underlined</button>
</form>

Select the text you want italic/bold/underlined, and click on the button.

You Can't style the content of a text area , Instead use Div.

and for selection AND bold you can try this .

$('#bold').click(function() {
    var selected_text = window.getSelection ? 
        "" + window.getSelection() : document.selection.createRange().text;
     console.log(selected_text);
    $("div:contains('"+selected_text+"')").html(function(_, html) {
      return html.split(selected_text).join("<b>cow</b>");
   });

});

Note: I haven't tested this

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to build an own WYSIWYG editor (RTE) using Vanilla JS - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)