我如何使用 Livewire 和 CkEditor 4 傳遞數據？

Question

我不能用我的代碼傳遞數據。 我能怎么做？ 我試過很多編輯器，但沒有一個能正常工作。

<div wire:ignore>
    <textarea wire:model="content" id="editor"></textarea>
    <script>
        CKEDITOR.replace('editor', {
            // Define the toolbar groups as it is a more accessible solution.
            toolbarGroups: [{
                "name": "basicstyles",
                "groups": ["basicstyles"]
            },
                {
                    "name": "links",
                    "groups": ["links"]
                }
            ],
            callbacks: {
                onChange: function(contents, $editable) {
                @this.set('content', contents);
                }
            },
            // Remove the redundant buttons from toolbar groups defined above.
            removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar,Blockquote'
        });
    </script>
</div>

Answer 1

我會告訴你我的兩個版本。

1. 香草 Javascript。

    <div wire:ignore> <textarea id="description" wire:key="ckeditor-1">{{ $description }}</textarea> <script> CKEDITOR.replace('description'); CKEDITOR.instances.description.on('change', function() { @this.set('description', this.getData()); }); </script> </div>

@this.set 持續發送每個更改事件的數據。 您可以使用“模糊”事件而不是更改。 但是我遇到了問題，當用戶填寫 CKEditor 區域並立即單擊提交按鈕時。 那么該屬性將不會被設置。

順便說一句，你可以看到，我根本沒有使用wire:model，因為@this.set 正在做這項工作。 我正在使用wire：key（特別是對於被忽略的部分，替換為第三方庫）-但大多數時候即使沒有wire：key也可以工作。

2. 高山JS

我使用 AlpineJS 版本的原因是：我不希望我的 CKEditor 在每次更改時都與后端屬性實時同步。 對於 Alpine 版本，我正在使用 wire:model 正確，我可以使用 wire:model.defer （這導致數據將在下一個網絡請求中發送 - 當我提交表單時）。

<div wire:ignore>
  <textarea id="description"
    wire:model.defer="product.description"
    wire:key="ckeditor-1"
    x-data
    x-init="
      CKEDITOR.replace('description');
      CKEDITOR.instances.description.on('change', function() {
        $dispatch('input', this.getData());
      });"
  >
    {{ $description }}
  </textarea>
</div>

這也與 CKEditor 的“更改”事件有關。 Alpine 的輔助指令 $dispatch 將 CKEditor 的數據與 wire:model 屬性同步/發送。

如果您使用 wire:model 而不延遲，則數據將與 CKEditor 中的每個更改同步 - 類似於 vanilla JS 版本。

Answer 2

CKEDITOR-5

<form wire:submit.prevent="SendMail" enctype="multipart/form-data">
    @csrf
    <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" data-message="@this" class="form-control required" name="message"
                id="message"></textarea>
            <x-error-message :value="__('message')" />
        </div>
    </div>
    
    <button wire:loading.attr="disabled" type="submit"
        class="btn btn-primary float-right" id="submit">Create</button>
</form>

腳本

<script>
    ClassicEditor
        .create(document.querySelector('#message'))
        .then(editor => {
            editor.model.document.on('change:data', () => {
                     const textareaValue = $('#message').data('message');
                     eval(textareaValue).set('message', editor.getData());
            })
        })
        .catch(error => {
            console.error(error);
        });
</script>

或備用腳本，同時點擊事件

<script>
    ClassicEditor
        .create(document.querySelector('#message'))
        .then(editor => {
            document.querySelector('#submit').addEventListener('click', () => {
                let textareaValue = $('#message').data('message');
                eval(textareaValue).set('message', editor.getData());
            })
        })
        .catch(error => {
            console.error(error);
        });
</script>

注意：不要忘記在textarea標簽中添加data-message="@this" 。 兩個腳本都在工作，你可以選擇任何你想要的。