Filament•16mo ago

Error wheni ntegrate CkEditor5

I want to integrate CkEditor5 in my code. My code is as shown in the image. Step 1: My screen has a ckeditor Step 2: When i select image by click input, my screen has two ckeditors ? How can i fix that ?

7 Replies

LeandroFerreira•16mo ago

maybe importing assets via hooks? https://filamentphp.com/docs/2.x/admin/appearance#including-frontend-assets

Appearance - Admin Panel - Filament

Messenger of truthOP•16mo ago

How can i only load it in special page ?

Messenger of truthOP•16mo ago

LeandroFerreira•16mo ago

try

<x-filament::page>
  @push('scripts')
  <script>
      // Your JS here.
  </script>
  @endpush
</x-filament::page>

<x-filament::page>
  @push('scripts')
  <script>
      // Your JS here.
  </script>
  @endpush
</x-filament::page>

https://laravel-livewire.com/docs/2.x/inline-scripts#introduction

Livewire

Inline Scripts | Livewire

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

krekas•16mo ago

why are you even using ckeditor? it's a headache. what's the point of filament if you aren't using it basically? for the ckeditor maybe this will help you

<div>
    <div class="mb-4">
        <label class="block font-medium text-sm text-gray-700" for="description">
            Product description
        </label>
        <div wire:ignore>
            <textarea data-description="@this"
                      id="description"
                      wire:model.defer="product.description"></textarea>
        </div>
        @error('product.description')
        <div class="text-sm text-red-500 ml-1">
            {{ $message }}
        </div>
        @enderror
    </div>
</div>

@push('scripts')
    <script src="https://cdn.ckeditor.com/ckeditor5/31.1.0/classic/ckeditor.js"></script>
    <script>
        var ready = (callback) => {
            if (document.readyState != "loading") callback();
            else document.addEventListener("DOMContentLoaded", callback);
        }
        ready(() =>{
            ClassicEditor
                .create(document.querySelector('#description'))
                .then(editor => {
                    editor.model.document.on('change:data', () => {
                        @this.set('product.description', editor.getData());
                    })
                    Livewire.on('reinit', () => {
                        editor.setData('', '')
                    })
                })
                .catch(error => {
                    console.error(error);
                });
        })
    </script>
@endpush

<div>
    <div class="mb-4">
        <label class="block font-medium text-sm text-gray-700" for="description">
            Product description
        </label>
        <div wire:ignore>
            <textarea data-description="@this"
                      id="description"
                      wire:model.defer="product.description"></textarea>
        </div>
        @error('product.description')
        <div class="text-sm text-red-500 ml-1">
            {{ $message }}
        </div>
        @enderror
    </div>
</div>

@push('scripts')
    <script src="https://cdn.ckeditor.com/ckeditor5/31.1.0/classic/ckeditor.js"></script>
    <script>
        var ready = (callback) => {
            if (document.readyState != "loading") callback();
            else document.addEventListener("DOMContentLoaded", callback);
        }
        ready(() =>{
            ClassicEditor
                .create(document.querySelector('#description'))
                .then(editor => {
                    editor.model.document.on('change:data', () => {
                        @this.set('product.description', editor.getData());
                    })
                    Livewire.on('reinit', () => {
                        editor.setData('', '')
                    })
                })
                .catch(error => {
                    console.error(error);
                });
        })
    </script>
@endpush

Messenger of truthOP•16mo ago

I want to set color for text. Can you recommend me something other than ckeditor ?

Patrick Boivin•16mo ago

I use both #tiptap and #tinyeditor. No custom code needed.

Gaming

Programming

Error wheni ntegrate CkEditor5