Integrasi Ckeditor dengan Laravel livewire File Manager

Haloo, pada artikel kali ini saya memberi tahu cara configurasi Ckeditor pada laravel yang terinstall Livewire tersebut. Berbeda config tanpa menggunakan livewire pada laravel, sehingga diharuskan beberapa configurasi tambahan supaya ckeditor bisa digunakan pada laravel yang terinstall livewire atau menggunakan komponen livewire tersebut. Ikuti dan perhatikan Script dibawah.

1.    Intall Package terlebih dahulu

   composer require unisharp/laravel-filemanager

2.    Publish package config dan asstes:

       php artisan vendor:publish --tag=lfm_config

   php artisan vendor:publish --tag=lfm_public

3.    (opsional) Jalankan perintah untuk menghapus cache:

       php artisan route:clear

    php artisan config:clear

4.    Create symbolic link

        php artisan storage:link

5.    Copy script dibawah ini pastekan pada folder layouts/app.blade.php  diatas tag </body>:

   

    <script>

      var options = {

        filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',

        filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token=',

        filebrowserBrowseUrl: '/laravel-filemanager?type=Files',

        filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token='

      };

    </script>

 

 

  </body>

</html>

6.    Copy script dibawah ini pastekan pada folder layouts/app.blade.php diatas tag </head>:

    <script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>

7.    Copy script dibawah ini pastekan pada folder contoh resources/views/livewire/input_data.blade.php (pada file yang anda gunakan ckeditor) dibagian paling bawah :

</div>

  </div>

  {{-- ckeditor --}}

  <script>

    CKEDITOR.replace('my-editor').on('change', function(e){

      @this.set('artikel', e.editor.getData());

     

    });

    </script>

8.    Lalu gunakan <textarea> seperti skript dibawah ini. JANGAN LUPA menambahkan wire:ignore pada bagian atas pembungkus textarea agar ckeditor tidak merender secara tiba-tiba tersebut :

               <div class="form-group row showcase_row_area" wire:ignore>          

                     <textarea id="my-editor" name="content"  

                    class="form-control">{!! old('content', 'test editor content') !!}</textarea>

                </div>

Anda bisa membaca dokumentasi disini Laravel File Mananger.