I’m using Phoenix live view on an edit form template with some textarea fields using ckeditor.
So When the application loads everything seems fine.
But when I start typing on any input field, The ckeditor fields loose the editor bindings. and fields are gone, with just labels left.
So Is there any event that I can bind to when phx live view updates the view. So that I can rebind all the fields with ckeditor again.
Hi Sorry for late reply, I have been travelling, even as I write this.
So the ckeditor(WYSIWYG editor) is binded to the input via a class names like
And the form I’m using is a phoenix live view form, validated using
So when I start to type,
phx_validate starts to validate the form by updating the form on each change. Which results in CKeditor binding to be removed. So I need to figure out how to rebind again on form validations.
What is happening is probably this:
- There is an input or textarea tag on the page
- This wysiwig editor registers an event listener on that specific tag
- you type something
- liveview triggers on the change event and replaces the input tag with an identically looking new input tag, but the event listener registered in step 2 is not registered on that new tag and was probably garbage collected when the old tag disappeared.
You could look into ckeditor, whether you can specify what element it registers its event listeners on (some events propagate, so it might be able to listen on a containing element). I doubt that you can fix this on the liveview side of things.
You might be lucky to use methods on this page to re-init the editor. I have not tried it, but
replace() might do it.
In future live view versions we will allow you to say some areas should not be replaced/touched by LiveView, but this feature is not there currently.
Thanks, I could think of creating alias input element out of form scope that can handle ckeditor changes and update the main element on
blur for now. Will try that.