Install CKEditor

Install CKEditor

ashish2790 ashish2790
Jul 19, 2023 - 12:07
0 606

To integrate CKEditor with Laravel Livewire, you can follow these steps:

1. Install CKEditor:
   - Run the following command to install CKEditor via npm

npm install ckeditor4

2. Configure CKEditor:
   - In your Laravel project, navigate to the `resources/js` directory.
   - Create a new file named `ckeditor.js` and add the following code:

     import ClassicEditor from 'ckeditor4';
     
     window.ClassicEditor = ClassicEditor;

3. Register CKEditor in your Livewire component:
   - Open the Livewire component where you want to use CKEditor.
   - Add the following lines at the top of your component's PHP file:
     ```php

     protected $listeners = ['ckeditorReady'];

     public function ckeditorReady($field)
     {
         $this->dispatchBrowserEvent('ckeditorReady', $field);
     }


     ```

4. Add CKEditor to your Livewire view:
   - In your Livewire component's Blade view, add the following code to include the CKEditor script:
     ```html

     @push('scripts')
         <script src="{{ mix('js/ckeditor.js') }}"></script>
     @endpush


     ```

 - Place the following code wherever you want the CKEditor to appear:
     ```html
 

 <div wire:ignore>
         <textarea x-data x-ref="ckeditor" x-init="
             ClassicEditor.create($refs.ckeditor, {
                 // CKEditor configuration options
             }).then(editor => {
                 editor.model.document.on('change:data', () => {
                     $dispatch('input', editor.getData());
                 });

                 @this.ckeditorReady('{{ $attributes->wire('model')->value() }}');
             })
             .catch(error => {
                 console.error(error);
             });
         "></textarea>
     </div>


     ```

5. Update Livewire component to handle CKEditor value:
   - In your Livewire component's PHP file, update the property that corresponds to the CKEditor field:
     ```php
 

 protected $rules = [
         'ckeditorField' => 'required' // Add validation rules if needed
     ];

     ```

   - Add the following method to update the CKEditor field value when Livewire emits the `ckeditorReady` event:
     ```php

     public function updatedCkeditorField($value)
     {
         $this->emit('ckeditorReady', $value);
     }

     ```

That's it! CKEditor should now be integrated with your Laravel Livewire component. You can customize the CKEditor configuration options based on your requirements.

Tags: