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
Best Websites for Building Resumes

In this article, we will explore five top websites that can assist you in crafting a compelling resume to increase your chances of getting shortlisted by companies.

2 years ago By Mitali Gupta
Livewire contenteditable to variable using entagle

using livewire apline js to update variable in livewire component

1 year ago By Santosh Kshirsagar
The Importance of UX Design in Software Development The Importance of UX Design in Software Development

UX design is vital for user engagement, satisfaction, and the success of software applications in competitive markets.

2 years ago By Mitali Gupta