Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Building a Text Editor using Quill.js
Quill is a free and open-source text editor that falls under the category of WYSIWYG editors and is mainly built for the modern web that we use today. It is a highly customizable text editor and has many expressive API. Quill is very easy to use and provides a good interface that is even understandable to those that have worked on markup only.
In this tutorial, we will take multiple examples to explain how you can build a text editor using Quill.js.
While there are dozens of rich text editors that belong to the WYSIWYG text editors, the most widely used one is Quill, by a very big margin. Now, let's learn how to use Quill.
Let's Create a Basic Text Editor Using Quill
The first step to work with Quill is to be able to make it available in our editor of choice, and for that, we need to put the two CDN links shown below inside the <head> tag of our HTML code.
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"> <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
The first CDN link is the CSS styling file for Quill, while the second CDN link is the JavaScript file of Quill. We need to append these two lines shown above inside the <head> tag of our HTML code.
Our <head> tag should look something like this.
<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"> <title>Quill Text Editor</title> <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"> <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script> </head>
Now that we have added the CDNs in the <head> tag, it's time that we start working on the <body> tag as well. Inside the <body> tag, let's create a <div> tag with the id="editor" and a simple styling of some specified height as well. Consider the <body> tag shown below.
<body> <div id="editor" style="height: 250px"></div> </body>
In the above code, we created a <div> tag with the id="editor" and provided a simple styling that specifies the height of the div to be of 250px.
Now what's left is to create a <script> tag inside which we will create an instance of the Quill class and then pass the id of the <div> that we created as the first argument and the second argument is basically an object in which we specify the property of the object that we want inside the text editor.
Consider the <script> tag shown below.
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
The above <script> tag should be placed at the end of the <body> tag, i.e., just before closing the <body> tag.
index.html
The entire HTML code is shown below.
Example
<!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">
<title>Quill Text Editor</title>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
</head>
<body>
<div id="editor" style="height: 200px"></div>
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
</body>
</html>
If you open the above HTML file in the browser, you will see a text editor output in the browser. In the text editor that you will see, we will have a ton of toolbar options made available to us and we can make use of any of them in our text editor.
Let's Customize the Look of the Text Editor
Now let's say that we only want to provide two default toolbar options and not all of them that we get by default in the normal text editor. In that case, we can use the <script> tag shown below.
<script>
let toolbarOptions = [
['bold', 'italic', 'underline']
]
let quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
</script>
In the above <script> tag we are providing only three options, i.e., bold, italic and underline in the toolbar, and hence only these options will be made available to the text editor.
index.html
The updated index.html file is shown below.
Example
<!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">
<title>Quill Text Editor</title>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
</head>
<body>
<div id="editor" style="height: 200px"></div>
<script>
var toolbarOptions = [
['bold', 'italic', 'underline']
]
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
</script>
</body>
</html>
If you run the above file in the browser, you will only see three toolbar options in the text editor, i.e., the bold option, the italic option, and the underline option.
Log the Contents of Text Editor in the Console
Now let's say that we want to log whatever we write inside the text editor to the console, and in order to do that we first need to create a button in the <body> tag.
Consider the code snippet of creating the button shown below.
<button onclick="consoleHTMLContent()">Print in Console</button>
Now let's focus on the <script> tag inside which we need to create a function that will actually log the content of the quill text editor and also some more toolbar options.
Consider the updated <script> tag shown below.
<script>
let toolbarOptions = [
['bold', 'italic', 'underline'],[{
'size': ['small', false, 'large', 'huge']
}],[{
'color': []
}, {
'background': []
}]
]
let quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
function consoleHTMLContent() {
console.log(quill.root.innerHTML);
}
</script>
In the above <script> tag, we have a function named consoleHTMLContent, inside which I am printing the contents that are present inside the root property of the quill object.
index.html
The updated index.html code is shown below.
Example
<!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">
<title>Quill Text Editor</title>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
</head>
<body>
<div id="editor" style="height: 200px"></div>
<button onclick="consoleHTMLContent()">Print in Console</button>
<script>
let toolbarOptions = [
['bold', 'italic', 'underline'],[{
'size': ['small', false, 'large', 'huge']
}],[{
'color': []
}, {
'background': []
}]
]
let quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
function consoleHTMLContent() {
console.log(quill.root.innerHTML);
}
</script>
</body>
</html>
If we run the above code in the browser, we will see a text editor and once we enter some text inside that editor and click on the button, the root object of the quill text editor will be printed inside the console.
Output
I tried writing a simple line in the editor and then clicked the button and this is the output that I got in the browser console.
<p>Hi There <strong>Inside HTML </strong><em>Is this italic?</em></p>
Conclusion
In this tutorial, we demonstrated how you can use Quill.js to create text editors with different toolbar options. With the help of multiple examples, we explained how to add or remove toolbars as well as how to console root elements of the Quill text editor as well.
1K+ Views
