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

What is CI/CD ? What is CI/CD ?

This article examines the meaning and significance of CI/CD in software development, emphasizing its role in improving the efficiency and reliability of software releases through automation and continuous integration and delivery.

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

1 year ago By Aniket Prajapati
EdKool.com Launches: A New Destination for All Things Education & Technology

We're delighted to announce the launch of EdKool.com, a unique platform designed to bridge the gap between education and technology.

1 year ago By Santosh Kshirsagar