[Livewire] 取得與設定 CKEditor 欄位的內容

分享:

要把 Livewire 跟 CKEditor 的值整在一起的話需要再做這樣的設定:

首先 HTML 是長這樣:

<div class="form-row admin-edit-block" wire:ignore>
  <div class="col-12">
    <label for="">內文</label>
    <textarea
    id="editor"
    wire:model.debounce.9999999ms="content"
    class="form-control"
    rows="6">{!! $content !!}</textarea>
  </div>
</div>

 

在初始化 editor 的時候則是改成這樣(CKEDITOR-5),抓 change:data 後去設定變數:

ClassicEditor
       .create(document.querySelector('#editor'))
       .then(editor => {
           editor.model.document.on('change:data', () => {
           @this.set('content', editor.getData());
          })
       })
       .catch(error => {
          console.error(error);
       });

 

這樣才能確實更新資料。

參考:
Laravel livewire and ckeditor
How to bind CKEditor value to Laravel livewire component

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。