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

Quill Editor in laravel livewire

0 min read
1 year 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

Web Development as a career !! Web Development as a career !!

Web development offers a fulfilling career designing, developing, and maintaining websites and applications, combining creativity and technical skills in the digital realm.

2 years ago By Mitali Gupta
HashMaps

Hashing is a technique or process of mapping keys, and values into the hash table by using a hash function. It is done for faster access to elements.

1 year ago By Aniket Prajapati
How to identify Stack Questions? How to identify Stack Questions?

In this article, you will get clarity about how to find any given question that can be solved using stack.

2 years ago By Aniket Prajapati
Top 10 Web Frameworks of 2023 Top 10 Web Frameworks of 2023

As technology evolves and new trends arise, the landscape of web frameworks is continually shifting. This article will present the top 10 web frameworks to consider in 2023.

2 years ago By Mitali Gupta