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 Agile Development ? What is Agile Development ?

Agile development is a software development approach that emphasizes flexibility, collaboration, and continuous delivery. It involves iterative development, continuous feedback, a collaborative approach, adaptability, and continuous improvement.

1 year ago By Mitali Gupta
Introduction to Django

A high-level Python web framework called Django makes it possible for programmers to create web applications rapidly and effectively. It adheres to the Model-View-Controller (MVC) architectural design pattern, placing emphasis on the division of duties and encouraging code reuse. Django offers a comprehensive collection of conventions, frameworks, and tools that speed up development and promote best practises.

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
For Laravel Setting UP CI/CD Pipeline using GitHub, CodeDeploy, S3 and EC2

Setting ci/cd pipeline for laravel application on aws using github actions then uploading to s3 and using codedeploy application gets installled on EC2 instance

1 year ago By Santosh Kshirsagar