Laravel Livewire和ckeditor

如何解决Laravel Livewire和ckeditor

我试图将ckeditro与laravel livewire集成在一起，但是每次我将内容输入编辑器时，livewire都会从我的文本区域中删除该编辑器。

我的代码如下

scale

以下是javascript

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

任何帮助将不胜感激

谢谢

更新

我正在慢慢到达那里。我唯一的问题是，当我保存表单时，ckeditor将从文本区域中删除。

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

解决方法

保存表单时，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）

,

我有同样的问题。 您可以使用“脱水”重新初始化ckeditor。

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

在父视图中，您可以再次初始化CKEditor

 Livewire.on('initializeCkEditor',function () {
    ClassicEditor.create(document.getElementById('idOfTextarea')).then(editor => { thisEditor = editor });
 });

,

为了让它与 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;

}

,

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

文本区域

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

,

Livewire 有一个 .defer 修饰符，可以在下一个网络请求中批量更新数据。 More on Livewire Official Documentation

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