[英]CK Editor Laravel Livewire
Is there anyway for Laravel Livewire to make my CKEditor the same behavior as a wire:model.lazy? Laravel Livewire 是否有让我的 CKEditor 与电线相同的行为:model.lazy? currently I have a script tag that listens for any changes.
目前我有一个脚本标签来监听任何变化。 Which causes for every type a request towards the component..
这导致每种类型都向组件发出请求..
<script>
ClassicEditor
.create(document.querySelector('#body'))
.then(editor => {
editor.model.document.on('change:data', () => {
@this.set('body', editor.getData());
})
})
.catch(error => {
console.error(error);
});
</script>
The behavior I want is either a button or everytime I lose focus on the CKEditor the $body will be updated.我想要的行为是一个按钮,或者每次我失去对 CKEditor 的关注时,$body 都会更新。
just listen to the submit button and update the value on click只需收听提交按钮并在单击时更新值
let editor;
ClassicEditor.create(document.getElementById('post'), {
// configs
})
.then(newEditor => {
editor = newEditor;
})
.catch(error => {});
document.querySelector('button[type="submit"]').addEventListener('click', function () {
@this.set('post', editor.getData());
});
For me and anybody else who have the same issue对于我和其他有同样问题的人
The main issue here is on.change
this piece of code on( 'change:data'...
will make the editor send post
request on every single key press.这里的主要问题是
on.change
这段代码on( 'change:data'...
将使编辑器在每次按键时发送post
请求。
Solving the issue.解决问题。
<script>
let body_changed = false;
ClassicEditor
.create(document.getElementById('body'), {})
.then(editor => {
window.body = editor;
detectTextChanges(editor);
detectFocusOut(editor);
})
function detectFocusOut(editor) {
editor.ui.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
if (!isFocused && body_changed) {
body_changed = false;
@this.set('body', editor.getData());
}
})
}
function detectTextChanges(editor) {
editor.model.document.on('change:data', () => {
body_changed = true;
});
}
</script>
Hope this will help me and others in future:)希望这对我和其他人将来有帮助:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.