如何解决我如何使用 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>
解决方法
我将向您展示我的两个版本。
-
原生 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 持续发送每个更改事件的数据。您可以使用 'blur' 事件而不是更改。但是我遇到了问题,当用户填充 CKEditor 区域并立即单击提交按钮时。那么属性将不会被设置。
顺便说一句,你可以看到,我根本没有使用 wire:model,因为 @this.set 正在做这项工作。 我正在使用 wire:key(特别是对于被忽略的部分,替换为第三方库) - 但大部分时间即使没有 wire:key 也能工作。
- AlpineJS
我使用 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的'change'事件挂钩。 Alpine 的辅助指令 $dispatch 使用 wire:model 属性同步/发送 CKEditor 的数据。
如果你使用 wire:model 而不使用 defer,数据将与 CKEditor 中的每个更改同步 - 类似于 vanilla JS 版本。
,对于 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>
OR 替代脚本,同时点击事件
<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>
注意:不要忘记在 data-message="@this"
标签中添加 textarea
。两个脚本都可以运行,您可以选择任何您想要的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。