Using Quill Rich Text Editor in the HTML Form element

Quill JS

Quill is a free, open-source WYSIWYG editor designed for the modern web.
Let's use Quill js in form element. You can check the final HTML code at the bottom of this post. (￣y▽,￣)╭

Create `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Add Bootstrap 5

It is ok if you don't use Bootstrap.
In <head> tag

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />

Add <script> at the bottom of the <body> tag

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

Let's put some layout and form in <body> tag

<div class="container">
        <div class="m-5">
        <h1 class="text-center">HELLO</h1>
      </div>
      <form action="https://httpbin.org/post" method="post">
        <div class="mb-3">
          <label for="title" class="form-label">Title</label>
          <input
            type="text"
            class="form-control"
            name="title"
            id="title"
            required
          />
        </div>
        <button type="submit" class="btn btn-primary">Add</button>
        <a href="./" class="btn btn-dark">Back</a>
      </form>
</div>

For the action, you can also use your own backend code like function.php. For now, I will use "https://httpbin.org/post".

Add Quill Rich Text Editor

Now, we will add Quill text editor.
https://quilljs.com/docs/quickstart
In <head> tag.

<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />

Add <script> at the bottom of the <body> tag

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<script>
  const quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

In the <form> tag, add <div> for text editor.

<div class="mb-3">
          <label for="des" class="form-label">Content</label>
          <div id="editor" class="form-control" name="des"></div>
 </div>

Send Post method for Quill text editor.

  form.addEventListener("formdata", (event) => {
          event.formData.append("des", quill.root.innerHTML);
        });

Add this code in <script> tag. This append Quill content as html code before submitting.

Final index.html will look like this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <div class="m-5">
        <h1 class="text-center">HELLO</h1>
      </div>
      <form action="https://httpbin.org/post" method="post">
        <div class="mb-3">
          <label for="title" class="form-label">Title</label>
          <input
            type="text"
            class="form-control"
            name="title"
            id="title"
            required
          />
        </div>
        <div class="mb-3">
          <label for="des" class="form-label">Content</label>
          <div id="editor" class="form-control" name="des"></div>
        </div>
        <button type="submit" class="btn btn-primary">Add</button>
        <a href="./" class="btn btn-dark">Back</a>
      </form>
 </div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"
      ></script>
      <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
      <script>
        const quill = new Quill("#editor", {
          theme: "snow",
        });
        const form = document.querySelector("form");
        form.addEventListener("formdata", (event) => {
          event.formData.append("des", quill.root.innerHTML);
        });
      </script>
  </body>
</html>