How can get the parent iFrame ID when blur in tinymce editor?

Question

I implemented 4 TinyMCE editors on one page. I want to get the editor ID when the user leaves the TinyMCE editor and put the editor's html in the textarea. On blur I can get the editor html. but I can't find the iFrame ID in Firefox and IE. I tried this code.

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    plugins : "table,insertdatetime,fullscreen,searchreplace,emotions,paste,",
    selector: "#vereinbarungen",
    selector: "#narration",
    theme_advanced_buttons1 : "insertdate,inserttime,|,hr,emotions,|,search,replace,|,cut,copy,paste,pastetext,pasteword,|,forecolor,backcolor,|,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,|,fullscreen", 
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "bottom",
    theme_advanced_toolbar_align : "left",
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
    plugin_insertdate_dateFormat : "%d.%m.%Y",
    plugin_insertdate_timeFormat : "%H:%M:%S",
    setup : function(ed) {    
        ed.onInit.add(function(ed, event) {
            var dom = ed.dom,
            doc = ed.getDoc(),
            el = doc.content_editable ? ed.getBody() : (tinymce.isGecko ? doc : ed.getWin());
            tinymce.dom.Event.add(el, 'blur', function(e) {

                //this is the targeted iframe id this works in chrome but not works in other browsers.

                target_id = el.frameElement.id;
                html = $(ed.getBody()).html();
            });
        });
    },

});

When I tried this code with Chrome I get the target_id but when I try with other browsers el.frameElement is undefined.

What is the solution to this problem?

Michael Fromin Michael Fromin · Accepted Answer · 2019-08-08T14:12:12

If I understand your question what you want to do when the editor is blurred is to update the underlying <textarea> with the current value of the editor.

The triggerSave() API in TinyMCE will do what you want automatically without having to do any of the manual JavaScript work you are currently doing.

Here are examples:

TinyMCE 5: http://fiddle.tinymce.com/8Ogaab/4
TinyMCE 4: http://fiddle.tinymce.com/8Ogaab/5

The key code is this:

setup: function (editor) {
    editor.on('blur', function (e) {
        console.log('Triggering a Save');
        tinymce.triggerSave();
        console.log(document.getElementById('content').value);
    });
}

I use JavaScript to show what is in the <textarea> after the triggerSave() call completes but you would not need these console.log() calls other than for debugging.

How can get the parent iFrame ID when blur in tinymce editor?

2 Answers