I'm integrating FullCalendar, a JavaScript calendar component, in a custom Joomla! component. Loading, creating, updating and deleting calendar items is handled using JavaScript and a JSON endpoint. Editing of new calendar items is done in a modal dialog. The the dialog and its input elements are rendered in the usual Joomla! way, using an xml form definition and a some layout files. One of the input fields is a standard Joomla! calendar field using JCE.

The modal dialog does not contain a <form> element. All input fields are bound to a JavaScript object, which is available when the modal dialog closes. For the calendar field the <textarea> is bound to the JavaScript object, which I suppose should hold the contents of the editor. Unfortunately it does not. All bound input fields nicely update my JavaScript object, except the calendar field. Apparently the <textarea> does not get updated on the fly by the editor. Is there a way to make that happen, so the <textarea> always reflects the contents of the editor at any given moment?

Thanks to some other forum posts, pointing me into the right direction, I think I found an acceptable solution. By collecting any editor instances into an array first:

...
const editors= [];

tinyMCE.onAddEditor.add(function(mgr, ed) {
    editors.push({mgd: mgr, ed: ed});
});
...

I can later save the content of all editors to the associated form fields:

...
editors.forEach(editor => editor.ed.save());
...