how to get value from quill editor : A Clear and Simple Guide

showkat ali
Feb 10, 2024
1 Comments
Like 1
3219 View

Getting Value from Quill Editor: A Clear and Simple Guide.

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.

What is a Quill Editor?

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:

Find the Quill Editor on a website: click here.
Text to Write or Edit: Write or edit your blog post using the Quill Editor.

  <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.

Retrieving Content from Quill Editor

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:

Step 1: Initialize Quill Editor

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/bootstrap@5.0.2/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>

Step 2: Implement JavaScript Function

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;

            });

        }

    });

How to Use Quill Rich Text Editor Laravel 10: :Click Here

Conclusion

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.