Quill

Quill is a modern, lightweight WYSIWYG (What You See Is What You Get) rich text editor built for the web. It is highly customizable and provides a clean interface for editing content. This section covers the steps required to include Quill in your project:

Install from Yarn

To install Quill, run the following command in the root directory of your project:

yarn add quill --save

To use Quill in your project, you need to include its stylesheet and JavaScript files in your Laravel:

<link rel="stylesheet" href="assets/libs/quill/quill.core.css"><link/>
<link rel="stylesheet" href="assets/libs/quill/quill.bubble.css"><link/>
<link rel="stylesheet" href="assets/libs/quill/quill.snow.css"><link/>

<script src="assets/libs/quill/quill.js"><script/>

Below is an example of the HTML code to create a Quill editor area. This will allow users to add content using a rich text editor:

    Project description (Optional)
    

        
It will be as simple as occidental in fact, it will be Occidental.
        

            
Product Design, Figma (Software), Prototype
            
Four Dashboards : Ecommerce, Analytics, Project etc.
            
Create calendar, chat and email app pages.
            
Add authentication pages
        
    

Here is the JavaScript code that initializes the Quill instance. This will enable the rich text editor functionality for the specified element:

let createBlogEditor = document.getElementById('createBlogEditor');
if (createBlogEditor) {
    // Initialize Quill editor
    const snowEditor = new Quill('#createBlogEditor', {
        theme: 'snow', // Using snow theme
        modules: {
            toolbar: true, // Enabling toolbar with basic text editing options
        },
        placeholder: 'Compose your content here...', // Placeholder text
    });
}

The above JavaScript code does the following:

• Selects the element with the ID `createBlogEditor`, which contains the rich text editor.
• Initializes a new Quill instance with the `snow` theme (one of Quill's built-in themes).
• Enables the toolbar module, allowing users to access text editing features like bold, italic, and lists.
• Sets a placeholder text, which is visible until the user starts typing.