Laravel Livewire 和 ckeditor

Question

我正在尝试将 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>

Answer 1

我是如何解决CKEDITORLaravel-Livewire 中的问题的。

文本区

<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>

Answer 2

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>