Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Building a Text Editor using Quill.js
Quill is a free and open-source WYSIWYG (What You See Is What You Get) text editor built for modern web applications. It offers a highly customizable interface with an expressive API, making it easy to integrate rich text editing capabilities into your projects.
In this tutorial, we'll explore how to build text editors using Quill.js through practical examples, from basic setup to advanced customization.
Setting Up Quill.js
To get started with Quill, include the CSS and JavaScript files in your HTML document's <head> section:
<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 link provides the CSS styling, while the second loads the Quill JavaScript library.
Creating a Basic Text Editor
Here's a complete example of a basic Quill text editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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: 250px;"></div>
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
</body>
</html>
This creates a text editor with the default Snow theme, which includes a comprehensive toolbar with formatting options like bold, italic, lists, links, and more.
Customizing the Toolbar
You can customize which toolbar options appear by specifying a toolbarOptions array:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Quill 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>
This example shows only three formatting options: bold, italic, and underline.
Advanced Toolbar Configuration
You can add more sophisticated formatting options including font sizes, colors, and backgrounds:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Quill 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="getContent()">Get Editor Content</button>
<div id="output"></div>
<script>
var toolbarOptions = [
['bold', 'italic', 'underline'],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'color': [] }, { 'background': [] }]
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
function getContent() {
var content = quill.root.innerHTML;
document.getElementById('output').innerHTML = '<strong>HTML Content:</strong><br>' + content;
console.log(content);
}
</script>
</body>
</html>
This example demonstrates how to retrieve the editor content both in the browser console and display it on the page.
Available Toolbar Options
Here are some common toolbar options you can include:
| Category | Options |
|---|---|
| Text Formatting | 'bold', 'italic', 'underline', 'strike' |
| Lists | { 'list': 'ordered' }, { 'list': 'bullet' } |
| Text Style | { 'header': [1, 2, 3, false] } |
| Colors | { 'color': [] }, { 'background': [] } |
Getting Editor Content
Quill provides multiple ways to retrieve content:
// Get HTML content var htmlContent = quill.root.innerHTML; // Get plain text var textContent = quill.getText(); // Get Delta format (Quill's native format) var deltaContent = quill.getContents();
Conclusion
Quill.js provides a powerful and flexible solution for implementing rich text editing in web applications. With its modular architecture and extensive customization options, you can create editors tailored to your specific needs while maintaining a clean, modern interface.
4K+ Views
