Integrate Twilio in Laravel: Made Easy Way
Read More
Quill Editor is a useful tool for creating and editing text on websites. In this guide, we will discuss how to get the value from the Quill Editor. We will go through the basics of Quill Editor and give a detailed explanation on how to use it.
Quill is a free, open-source WYSIWYG editor built for the modern web. You can completely customize it for any need with its modular architecture and expressive API. With this powerful tool, you can also add images, embed videos, and format text. Quill Editor has an intuitive and user-friendly interface.
How to Use Quill Editor
The Quill Editor is simple to use. To get started, follow these steps:
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
3. Format Text: Use formatting options such as bold, italic, and underline to emphasize important information. For example, you can make your headers bold.
We can use the methods provided by the Quill API to extract the content from a Quill editor. One of the most straightforward methods is getText, which retrieves the text content entered into the editor. Let's break down the process into simple steps:
First, we need to initialize the Quill editor within our HTML document. We include the necessary Quill stylesheet and script files from a CDN and create a container for the editor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quil editor</title>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<label class="form-label font-weight-bold">Job Description</label>
<div id="quill-editor" class="mb-3" style="height: 300px;"> </div>
<textarea rows="3" class="mb-3 d-none" name="description" id="quill-editor-area"></textarea>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (document.getElementById('quill-editor-area')) {
var editor = new Quill('#quill-editor', {
theme: 'snow'
});
var quillEditor = document.getElementById('quill-editor-area');
editor.on('text-change', function() {
quillEditor.value = editor.root.innerHTML;
});
quillEditor.addEventListener('input', function() {
editor.root.innerHTML = quillEditor.value;
});
}
});
</script>
</body>
</html>
Next, we create the getValueFromQuill() JavaScript function, which is activated when a user clicks the "Get Content" button. Using the getText() function made available by the Quill API, we retrieve the content from the Quill editor within this function.
`getContent` by Quill Api: click here
document.addEventListener('DOMContentLoaded', function() {
if (document.getElementById('quill-editor-area')) {
var editor = new Quill('#quill-editor', {
theme: 'snow'
});
var quillEditor = document.getElementById('quill-editor-area');
editor.on('text-change', function() {
quillEditor.value = editor.root.innerHTML;
});
quillEditor.addEventListener('input', function() {
editor.root.innerHTML = quillEditor.value;
});
}
});
Quill Editor is a powerful tool for creating and editing text on web pages. To make the best use of the Quill Editor, follow the instructions and advice in this guide. To create interesting and educational content, use basic language, formatting options, images, and videos. To avoid losing your work, preview it before publishing, and save frequently. The Quill Editor is a useful tool for any website because of its collaboration features, formatting options, and user-friendly interface.
Recent posts form our Blog
muhammad Jawad Reply
Thanks ! . its working smoothly