Closed sanishmbod closed 3 years ago
Thanks for the bug report and demo code. We'll test it out and see what we can do.
Hi @sanishmbod
Thank you for the replication code. I tried to make a PR into your repo but I didn't have access.
So there are two things:
NgModel not changing with changes from the toolbar
By default, the Angular wrapper only emits changes when the editor fires the following events: input change undo redo
. However, you can modify the default behaviour by adding the property modelEvents
to fire NgModel changes on different editor events.
The NgModel is out of sync
This happens because of an Angular bug where translating from angular will generate code following the order of the translation. This cause custom callbacks to fire with a not-yet-synchronised value and displaying the behaviour you are experiencing. You can find it better explained here: https://medium.com/@lukaonik/how-to-fix-the-previous-ngmodelchange-previous-value-in-angular-6c2838c3407d
You can try this:
<editor [(ngModel)]="content" (ngModelChange)="textChange()" modelEvents='change input nodechange undo redo' [init]="{
height: 500,
menubar: true,
branding: false,
theme_url: '/assets/tinymce/themes/silver/theme.min.js',
base_url: '/assets/tinymce/',
toolbar: 'undo redo | styleselect | bold bullist numlist | link | table | code ',
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
menu: {
edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | searchreplace selectall' },
insert: { title: 'Insert', items: 'image media link inserttable hr charmap' },
view: { title: 'View', items: 'code preview' },
format: { title: 'Format', items: 'bold superscript subscript | formats | removeformat' },
table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' },
file: { title: 'File', items: '' },
tools: { title: 'Tools', items: '' }
}
}"></editor>
Let me know your thoughts.
What is the current behavior?
When using 2 way databinding with nested components and ngModelChange, the ngModelChange event is not fired when making changes from the toolbar (like inserting source code or making text bold). Also when using the text editor for typing text, it is out of sync by one character.
What is the expected behavior? For ngModelChange to fire with the latest changes.
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?
I am using :
Demo Video : https://streamable.com/rhbk4d Demo code : https://github.com/sanishmbod/tinymce-problem