Posted on • Updated on

Reset Value Of Custom Build CKEditor 5 With Livewire

author

Kai

Prerequisites

Step 1 - Setup Scripts

Refer to the following code to set up the livewire component blade file.

#post-component.blade.php

<script src="/ckeditor-5/build/ckeditor.js"></script>
<script>
	const watchdog = new CKSource.EditorWatchdog();
	window.watchdog = watchdog;
<script>
<script>
	document.addEventListener('livewire:load', function () {
		Livewire.on('resetCkEditor', () => {
		console.log('resetCkEditor');
		watchdog.editor.setData("");
		});
	});
</script>

Step 2 - Setup Livewire Component

Refer to the following code to set up the component file.

#PostComponent.php

function resetCkEditor(){
	$this->emit('resetCkEditor');
}
function updatePost(){
	...
	$this->reset([...]);
	$this->resetCkEditor();
	...
}

Conclusion

In This tutorial, we will learn how to reset the value of Custom Build CKEditor 5 while working with livewire.

end of article

Related Posts

Join Our Newsletter

Want the latest & greatest from our blog straight to your inbox with some exclusive offers from our partners and sponsors?

We won't spam. Promise.