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

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.

1 year ago By Mitali Gupta
Quill Editor in laravel livewire

using quill editor in livewire code

1 year ago By Santosh Kshirsagar
Creating a Spinner Using Pure HTML and CSS Creating a Spinner Using Pure HTML and CSS

In this article, we will explore how to create a stylish spinner using pure HTML and CSS. The animated circle rotates indefinitely, offering visual feedback for ongoing processes on your web pages.

1 year ago By Mitali Gupta
Introducing ECMAScript 6 (ES6): A New Era for JavaScript Development Introducing ECMAScript 6 (ES6): A New Era for JavaScript Development

In this article, we'll explore the important changes and improvements that came with ECMAScript 6 (ES6), and how they've made JavaScript programming better.

1 year ago By Mitali Gupta