Multiple instances of TinyMCE 6+ results in the first TinyMCE element not loading on older browsers (Chrome before v119) #1629
Description
There appears to be an issue in Chrome versions earlier than v119 where using multiple TinyMCE 6+ fields can cause the first editor not to load. This, in turn, means that subsequent attempts to retrieve userData silently fail.
Based on my testing, newer versions of TinyMCE initialise rich text fields asynchronously rather than sequentially. Modern browsers handle this correctly, but older versions of Chrome seem to encounter a race condition that prevents the first editor from finishing its initialisation. As a result, the first field isn’t created properly and returns null when later accessed through userData.
The fix is simple: add a short delay (around 100 ms) to the setTimeout() call in the onRender() function. This allows the first TinyMCE initialisation to complete fully before subsequent instances are created, ensuring all editors load and function correctly.
onRender() {
const e = window.tinymce.get(this.id);
e && window.tinymce.remove(e);
const t = jQuery.extend(this.editorOptions, this.classConfig);
t.target = this.field;
const r = [];
Number(window.tinymce.majorVersion) >= 5 && r.push("contextmenu"), Number(window.tinymce.majorVersion) >= 6 && r.push("paste", "print"), t.plugins = t.plugins.filter((e => -1 === r.indexOf(e)));
const n = this.config.userData ? this.parsedHtml(this.config.userData[0]) : void 0,
o = window.lastFormBuilderCopiedTinyMCE ? this.parsedHtml(window.lastFormBuilderCopiedTinyMCE) : void 0;
window.lastFormBuilderCopiedTinyMCE = null;
const i = function(e) {
o ? e[0].setContent(o) : n && e[0].setContent(n)
};
setTimeout((() => {
window.tinymce.init(t).then(i)
}), 100)
}