Limited Period Offer : 20% Discount on online/offline courses, for more details call/whatsapp

Quill Editor in laravel livewire

0 min read
2 years ago By Santosh Kshirsagar

Create livewire component

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Quill extends Component
{
    public $value;
    public $event = 'quill_value_updated';
    public $quillId;
    public $content;

    public function updatedValue($value){
        $this->emit($this->event, $this->value);
    }

    public function mount(){
        $this->quillId = 'quill-'.uniqid();
    }

    public function render()
    {
        return view('livewire.quill');
    }
}

Blade view file

<div>
    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

    <!-- Create the editor container -->
    <div id="{{ $quillId }}" wire:ignore></div>

    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

    <!-- Initialize Quill editor -->
    <script>
        const quill = new Quill('#{{ $quillId }}', {
            theme: 'snow'
        });

        quill.on('text-change', function () {
            let value = document.getElementsByClassName('ql-editor')[0].innerHTML;
            @this.set('value', value)
        });
        @if($content)
        const delta = quill.clipboard.convert('{!! $content !!}')
        quill.setContents(delta, 'silent')
        @endif
    </script>    
</div>

Aug 25, 2023 18:10 Back to Articles

Other Articles

Mastering the Fundamentals: Basic HTML Tags for Web Development Mastering the Fundamentals: Basic HTML Tags for Web Development

In this article, we'll explore the Basic HTML elements that form the foundation of every web page.

2 years ago By Mitali Gupta
Real DOM VS Virtual DOM

In this article, we will discuss the differences between the real DOM and the virtual DOM in the context of web development. We'll explore how these concepts impact the performance and efficiency of web applications, and how they contribute to the overall user experience. By the end of this article, you'll have a clear understanding of the distinctions between these two approaches to managing and updating user interfaces on the web.

2 years ago By Mitali Gupta
How to use and upload profile photos to AWS s3 using laravel jetstream

Using jetsream to upload photos to s3 configuration and details

2 years ago By Santosh Kshirsagar
Stack all Interview Questions .

In this Article all the problems related to stack is been uploaded for coding interview. Here there are questions which will help building your concept on stack from beginner to advance and you will be able to tackle any stack interview problem very easily.

2 years ago By Aniket Prajapati