Laravel livewire и ckeditor

Я пытаюсь интегрировать ckeditro с laravel livewire, но каждый раз, когда я ввожу контент в редактор, livewire удаляет редактор из моего текстового поля.

Мой код выглядит следующим образом

<div class="form-group" wire:ignore>
    <label class="required" for="description">Page Description</label>
    <textarea class="form-control ckeditor" id="description" name="description"  cols="30" rows="10"
        wire:model="description"
    ></textarea>

</div>

Ниже приведен javascript

$(document).ready(function () {
    CKEDITOR.instances['description'].on('change', function(e){
        @this.set('description', e.editor.getData());
    });
});

Любая помощь будет оценена

Спасибо

Обновить

Я медленно добираюсь туда. Единственная проблема, с которой я столкнулся, заключается в том, что когда я сохраняю форму, ckeditor удаляется из текстового поля.

<div class="form-group" wire:ignore>
    <label class="required" for="description">Page Description</label>
    <textarea class="form-control ckeditor" id="description" name="description"  cols="30" rows="10"
    wire:model.debounce.9999999ms="description"
    x-data
    x-init="
    CKEDITOR.instances['description'].on('change', function(e){
        $dispatch('input', e.editor.getData())
    });

    "></textarea>
</div>

laravel-livewire ckeditor
person Danny Younes    schedule 23.08.2020    source источник
comment
ты нашел какое-нибудь решение? У меня точно такая же проблема.   -  person AH Rasel    schedule 13.01.2021

Ответы (5)


arrow_upward
1
arrow_downward

У меня такая же проблема. Вы можете повторно инициализировать ckeditor с помощью dehydrate.

public function dehydrate() {
     $this->emit('initializeCkEditor');
}

И в родительском представлении вы можете снова инициализировать CKEditor

 Livewire.on('initializeCkEditor', function () {
    ClassicEditor.create(document.getElementById('idOfTextarea')).then(editor => { thisEditor = editor });
 });
person KB2497    schedule 02.11.2020
comment
Я сделал это, но когда livewire работает, редактор становится чистым без старых данных .. Я также обнаружил ту же проблему, что и моя, но с CKEDITOR 5 laracasts.com/discuss/channels/laravel/livewire-and-tinymce - person Hassan Elshazly Eida; 04.01.2021

arrow_upward
0
arrow_downward

Когда вы сохраняете форму, Livewire перезагружает компонент Livewire. В настоящее время вы загружаете ckeditor, когда документ будет готов.

В событии сохранения испустите событие, подобное:

$this->emitUp('postAdded');

А затем в вашем javascript добавьте слушателя для события, например:

<script>
window.livewire.on('postAdded' => {
    CKEDITOR.instances['description'].on('change', function(e){
        @this.set('description', e.editor.getData());
    });
});
</script>

Это должно загрузить ckeditor в недавно обновленный код компонента. (https://laravel-livewire.com/docs/events)

Кроме того, я бы рекомендовал изменить это:

wire:model.debounce.9999999ms="description"

к этому:

wire:model.lazy="description"

так как это будет ждать, пока текстовое поле не потеряет фокус для обновления Livewire. (https://laravel-livewire.com/docs/properties#lazy-updating)

person Ken    schedule 25.08.2020
comment
Привет, Кен. Спасибо за ответ. События вообще не зажигаются. Не уверен что делать - person Danny Younes; 26.08.2020

arrow_upward
0
arrow_downward

Чтобы заставить его работать с ckeditor, вот как мы можем это сделать

ClassicEditor
.create( document.querySelector( '#yourCkId' ) )
.then( editor => {
    console.log( editor );
    editor.model.document.on( 'change:data', () => {
        // Below @this.set breaks down my ckeditor so I am avoiding it to set ckeditor value
        // @this.set("description", editor.getData());

        //instead use this
        $('#yourTextAreaId').val(editor.getData());
    } );
} )
.catch( error => {
    console.error( error );
} );

и HTML

<form wire:submit.prevent="store(document.querySelector('#yourTextAreaId').value)">
    <div wire:ignore>
        <div id="yourCkId">{!! $description !!}</div>
    </div>
    <textarea id="yourTextAreaId" wire:key="uniqueKey"  wire:model="description" style="display: none">
        {!! $description !!}
    </textarea>
</form>

И ваш контроллер Livewire

public function store($note){

    $this->note = $note;

}
person Abhi Burk    schedule 03.02.2021

arrow_upward
0
arrow_downward

Как я решил CKEDITOR проблему в Laravel-Livewire.

Textarea

<div wire:ignore class="form-group row">
    <x-label class="col-md-3 col-form-label" for="message" :value="__('Compose message')" />
    <div class="col-md-9">
        <textarea wire:model="message" class="form-control required" name="message" id="message"></textarea>
        <x-error-message :value="__('message')" />
    </div>
</div>

CKEDITOR-4

<script src="https://cdn.ckeditor.com/4.16.1/full/ckeditor.js"></script>

<script>
        const editor = CKEDITOR.replace('message');
        editor.on('change', function(event){
            console.log(event.editor.getData())
            @this.set('message', event.editor.getData());
        })
</script>

CKEDITOR-5

    <script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>

<script>
     ClassicEditor
       .create(document.querySelector('#message'))
       .then(editor => {
           editor.model.document.on('change:data', () => {
           @this.set('message', editor.getData());
          })
       })
       .catch(error => {
          console.error(error);
       });
</script>
person Neeraj Tangariya    schedule 28.05.2021

arrow_upward
0
arrow_downward

Livewire имеет модификатор .defer, который пакетирует обновления данных при следующем сетевом запросе. Подробнее об официальной документации Livewire

Протестировано на Laravel 8.4 Livewire v2.0


<form wire:submit.prevent="submit">
   <div wire:ignore>
      <textarea wire:model.defer="description" class="form-control"  id="description"  name="description">{!! $description !!}</textarea>                     
   </div>
</form

Ваш экземпляр редактора CK

<script>
    ClassicEditor
    .create(document.querySelector('#description'))
    .then(editor => {
        editor.model.document.on('change:data', () => {
            @this.set('description', editor.getData());
        })
    })
    .catch(error => {
        console.error(error);
    });
</script>
person Tithira    schedule 05.07.2021