Javascript 如何使用Livewire和CkEditor 4传递数据？

我不能用我的代码传递数据。我该怎么办？我试过很多编辑，但没有一个工作正常

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

CKEDITOR.replace（'editor'{
//定义工具栏组，因为它是一个更容易访问的解决方案。
工具栏组：[{
“名称”：“基本样式”，
“组”：[“基本样式”]
},
{
“名称”：“链接”，
“组”：[“链接”]
}
],
回调：{
onChange：函数（内容，$editable）{
@此.set（'content'，contents）；
}
},
//从上面定义的工具栏组中删除冗余按钮。
移除按钮：“下划线、删除、下标、上标、锚定、样式、特殊字符、块引号”
});

我将向您展示我的两个版本

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

{{$description}}
CKEDITOR.replace（‘说明’）；
CKEDITOR.instances.description.on（'change'，function（））{
@this.set（'description'，this.getData（））；
});

@此.set连续发送每个更改事件的数据。您可以使用“模糊”事件而不是更改。但当用户填写CKEditor区域并立即单击submit按钮时，我遇到了这个问题。这样就不会设置属性

顺便说一句，你可以看到，我根本没有使用wire:model，因为@this.set正在做这项工作。 我使用的是wire:key（特别是被忽略的部件，由第三方库替换）——但大多数情况下即使没有wire:key也可以工作

阿尔皮涅斯

我使用AlpineJS版本的原因是：我不希望我的CKeditor在每次更改时都与后端属性实时同步。对于Alpine版本，我正确地使用了wire:model，并且我可以使用wire:model.defer（这导致数据将在下一次网络请求时发送-当我提交表单时）

{{$description}}

这一个还与CKEditor的“change”事件挂钩。Alpine的helper指令$dispatch使用wire:model属性同步/发送CKEditor的数据

如果使用wire:model而不使用defer，则数据将与CKEditor中的每次更改同步-类似于vanilla JS版本。

对于CKEditor-5

@csrf
创造

脚本

分类编辑器
.create（document.querySelector（“#message”））
.然后（编辑=>{
editor.model.document.on（'change:data'，（）=>{
const textareaValue=$（'#message'）。数据（'message'）；
eval（textareaValue）.set（'message'，editor.getData（））；
})
})
.catch（错误=>{
控制台错误（error）；
});

或备用脚本，同时单击事件

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

分类编辑器
.create（document.querySelector（“#message”））
.然后（编辑=>{
document.querySelector（“#submit”）.addEventListener（'click'，（）=>{
让textareaValue=$（'#message'）。数据（'message'）；
eval（textareaValue）.set（'message'，editor.getData（））；
})
})
.catch（错误=>{
控制台错误（error）；
});

---

注意：不要忘记在

textarea

标记中添加

data message=“@this”

。两个脚本都正常工作，您可以选择任何您想要的。

我喜欢阿尔卑斯山方法。顺便说一句，这是为CK编辑器4。谢谢，它的工作。。。

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