在tinymce編輯器中模糊處理時如何獲取父iFrame ID？

Question

我在一頁上實現了4個TinyMCE編輯器。 當用戶離開TinyMCE編輯器並將編輯器的html放在textarea中時，我想獲取編輯器ID。 模糊時，我可以獲取編輯器html。 但我在Firefox和IE中找不到iFrame ID。 我嘗試了這段代碼。

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();
            });
        });
    },

});

當我在Chrome中嘗試此代碼時，我得到了target_id但是當我在其他瀏覽器中嘗試時， el.frameElement是未定義的。

這個問題有什么解決方案？

Answer 1

如果我理解您的問題，那么當編輯器模糊時，您想使用該編輯器的當前值更新基礎<textarea> 。

TinyMCE中的triggerSave() API將自動執行您想要的操作，而無需執行您當前正在執行的任何手動JavaScript工作。

以下是示例：

• TinyMCE 5： http ： //fiddle.tinymce.com/8Ogaab/4
• TinyMCE 4： http ： //fiddle.tinymce.com/8Ogaab/5

關鍵代碼是這樣的：

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

我使用JavaScript來顯示triggerSave()調用完成后<textarea>的triggerSave()但是除了調試以外，您將不需要這些console.log()調用。

Answer 2

我檢查所有對象及其tinymce的值，並通過以下方式獲得活動的編輯器ID

tinymce.EditorManager.activeEditor.editorId;

這將返回活動的編輯器ID