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>
Let's test the code
Output:
Here, you can see the text is submitted with HTML code.
Thank you for reading. (〜￣▽￣)〜
Top comments (0)