我如何使用 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" 。 两个脚本都在工作，你可以选择任何你想要的。