Closed tomaerden closed 3 years ago
Hi @tomaerden
It seems that the issue is the actual TinyMCE editor not triggering an event for the wrapper to emit after the line has been deleted. Here is a fiddle of TinyMCE not behaving as expected: http://fiddle.tinymce.com/cthaab/2
To work around this you can use the modelEvent
property to add nodechange
to the events bound to the NgModel directive.
E.G.: https://codesandbox.io/s/tinymceangular-forked-9jdn4
Let me know if this works for you
Hi. There is also a related problem: try to select all text (e.g. Cmd/Ctrl+A) and then hit delete key. The deletion will not be reported to ng model/FormControl.
I think it's a very high priority issue as it ends up "corrupting" data.
Reproducible in the same fiddle.
Please fix!
As a temporary workaround, could You suggest how to get to the contenteditable native element in tinymce editor
angular component?
So I can listen to native event before this nasty bug is fixed.
Interestingly, hitting a character key, e.g. "A" instead of delete, does cause the change to be reported.
After the non-reported deletion happens, if You press another key (e.g. shift), the (empty) value gets reported.
@jscasca workaround https://codesandbox.io/s/tinymceangular-forked-9jdn4 also fixes the issue mentioned by me, involving delete of all selected text. Thanks, @jscasca .
Any background why modelEvent property to add nodechange
helps, and why is this case of delete-all / delete-newline, special?
Hi @karol-depka
The wrapper works by hooking a callback on the selected modelEvent
events on the editor to fire a change with the current content. By default, the wrapper only hooks in change input undo redo
. However, in some cases users may wish to extend those cases to address particular situations. For example, deleting a new line will trigger the input
event before the line has been deleted in the editor and the last change will still have the content with the deleted line. Adding nodechange
ensures that we update the content again after the content changed, and after updating on the input
event.
I.E. this whole workaround is because of how the editor triggers events when deleting content.
thanks for your feedback @jscasca . Adding the nodechange event solves the problem I was facing. I had to add a distinctUntilChanged operator to filter out events for which the content did not change though. A bug might be opened on tinymce editor itself to trigger the change event also for this specific cass.
What is the current behavior? When removing a line break, data binding does not receive a change event immediately.
**Please provide the steps to reproduce and if possible a minimal demo of the problem via [codesandbox.io]
What is the expected behavior? The databinding reflects the change immediately.
Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or TinyMCE-Angular? tinymce: 5.4.2 tinymce-angular: 4.1.0 tested on windows 10 with chrome and firefox