时间戳

首页 > 解决方案 > Laravel livewire 和 ckeditor

ckeditor - 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 会从 textarea 中删除。

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

标签： ckeditorlaravel-livewire

解决方案

我是如何CKEDITOR在 Laravel-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>

推荐阅读