2

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

8 回答 8

4

我是如何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>
于 2021-05-28T10:20:39.487 回答
1

wire:ignore在您的容器中使用。这将防止 livewire 重新渲染组件。解释就到这里了，直接在代码中搜索即可。

https://laravel-livewire.com/docs/2.x/alpine-js#creating-a-datepicker

<div id="where-the-livewire-id-attached">
    <div id="container-wrapper" wire:ignore>
        <textarea id="your-editor" cols="30" rows="10"></textarea>
        <div id="word-count"></div>
    </div>
</div>

于 2021-10-18T06:48:04.550 回答
1

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

于 2020-08-25T13:22:22.077 回答
1

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

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

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

 Livewire.on('initializeCkEditor', function () {
    ClassicEditor.create(document.getElementById('idOfTextarea')).then(editor => { thisEditor = editor });
 });
于 2020-11-02T14:54:46.747 回答
1

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>
于 2021-07-05T17:19:18.207 回答
1

我这样做是使用 alpinejs x-init 初始化编辑器连线：模型绑定来自编辑器连线的数据值：忽略是为了让 livewire 在状态更改时跳过编辑器重新渲染

<div class="row">
                        <div class="col mb-3">
                            <label for="productDescription" class="form-label">Product
                                Description</label>
                            <div wire:ignore>
                                <textarea x-data x-init="ClassicEditor
                                .create(document.querySelector('#description'), {

                                })
                                .then(editor => {
                                    editor.model.document.on('change:data', () => {
                                        @this.set('description', editor.getData());
                                    })
                                })
                                .catch(err => {
                                    console.error(err.stack);
                                });" id="description" wire:model.lazy="description" name="description" required>
                                {!! $description !!}
                            </textarea>
                            </div>
                            @error('description')
                                <span
                                    class="text-warning"><small><strong>{{ $message }}</strong></small></span>
                            @enderror
                            <div class="form-text"><small class="text-muted">Enter a detailed
                                    description of the product</small></div>
                        </div>
                    </div>
于 2021-12-03T15:52:04.540 回答
0 
<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>

<div>
<div wire:ignore>
    <textarea class="form-control" wire:model="description" x-data x-init="
        ClassicEditor
        .create( $refs.editorDescription)
        .then(function(editor){
            
            editor.model.document.on('change:data', () => {
                @this.set('description', editor.getData())
                
            })
            
        })
        .catch( error => {
            console.error( error );
        } );" x-ref="editordescription">
    </textarea>
</div>
于 2021-12-31T00:50:25.343 回答
0

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

}
于 2021-02-03T06:19:31.403 回答