Laravel livewire和ckeditor

我试图将ckeditro与laravellivewire集成，但每次我将内容输入编辑器时，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.debounce.9999999ms="description"
    x-data
    x-init="
    CKEDITOR.instances['description'].on('change', function(e){
        $dispatch('input', e.editor.getData())
    });

    "></textarea>
</div>

我的代码如下

<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将从文本区域中删除

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

页面说明

保存表单时，Livewire将重新加载Livewire组件。当前，当文档准备就绪时，您正在加载ckeditor

在“保存”事件上，发出一个事件，如：

$this->emitUp('postAdded');

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

然后在javascript中，为事件添加一个侦听器，如：

$this->emitUp('postAdded');

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

为此：

wire:model.lazy="description"

因为这将等待文本区域失去焦点，Livewire才能更新。 我也有同样的问题。 您可以使用“脱水”重新初始化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>

---

我是如何解决Laravel Livewire中的

CKEDITOR

问题的

Textarea

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>

const editor=CKEDITOR.replace（'message'）；
编辑器.on（'change'，函数（事件）{
console.log（event.editor.getData（））
@this.set（'message'，event.editor.getData（））；
})

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>

分类编辑器
.create（document.querySelector（“#message”））
.然后（编辑=>{
editor.model.document.on（'change:data'，（）=>{
@this.set（'message'，editor.getData（））；
})
})
.catch（错误=>{
控制台错误（error）；
});

Hi Ken感谢您的回复。事件根本没有发生。我不知道该做什么，但当livewire工作时，编辑器变得干净，没有旧数据。。我也发现了和我一样的问题，但是对于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>