TinyMCE 3 - 触发模糊事件的文本区域 ID

Question

当 TinyMCE 编辑器发生模糊时，我试图找到触发模糊事件的文本区域的元素 ID（或名称）。我还想要获得焦点的元素的元素 ID（或名称），但那部分应该是相似的。

我越来越接近能够获取 tinymce 编辑器的 iframe id，但我只在 Chrome 中使用它，我确信有更好的方法.我需要它在不同的浏览器和设备上工作。

例如，下面的代码 returns 是 Chrome 中的 iframe id，这是可以的，因为 iframe id 仅将后缀“_ifr”附加到我的 textarea 元素 id。我更喜欢textarea的元素id，但是如果我需要去掉iframe后缀也没关系

编辑：我认为如果我添加一个完整的 TinyMCE Fiddle（而不是下面的代码）会更清楚： http://fiddle.tinymce.com/HIeaab/1

setup : function(ed) {
 ed.onInit.add(function(ed) {
  ed.pasteAsPlainText = true;
/* BEGIN: Added this to handle JS blur event */
/* example modified from: http://tehhosh.blogspot.com/2012/06/setting-focus-and-blur-event-for.html */
  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) {
   //console.log('blur');

   var event = e || window.event;
   var target = event.target || event.srcElement;
   console.log(event);
   console.log(target);
   console.log(target.frameElement.id);
   console.log('the above outputs the following iframe id which triggered the blur (but only in Chrome): ' + 'idPrimeraVista_ifr');
  
  })
  tinymce.dom.Event.add(el, 'focus', function(e) {
   //console.log('focus');
  })
/* END: Added this to handle JS blur event */
 });
}

也许最好介绍一下我要完成的工作的背景：我们在一个表单上有多个文本区域，我们正在尝试 "grammarcheck" 使用名为 "languagetool" 的软件（使用 TinyMCE 3.5.6 版）。在失去对文本区域的关注后，我们想为失去焦点的文本区域调用语法检查，然后 return 焦点到语法检查后它应该去的地方。

我已经为此苦苦挣扎了一段时间，非常感谢任何反馈（即使这是以不同方式执行此操作的一般建议）。

非常感谢！

Answer 1

简化

TinyMCE 在 Editor object for getting the editor instance ID: Editor.id

上提供了属性

检查 doc.content_editable 和 tinyMCE.isGecko 似乎也有点矫枉过正，因为 Editor.getBody() 已经允许跨浏览器兼容的事件绑定 （我检查了 IE8-11，以及最新版本的 Firefox 和 Chrome).

注意：我实际上发现逻辑未能在 Internet Explorer 中正确地将 ed.getBody() 分配给 el，因此它没有实现您的跨浏览器功能无论如何都需要。

尝试以下简化的事件绑定：

tinyMCE.init({
    mode : "textareas",
    setup : function (ed) {
        ed.onInit.add(function (ed) {

            /* onBlur */
            tinymce.dom.Event.add(ed.getBody(), 'blur', function (e) {
                console.log('Editor with ID "' + ed.id + '" has blur.');    
            });

            /* onFocus */
            tinymce.dom.Event.add(ed.getBody(), 'focus', function (e) {
                console.log('Editor with ID "' + ed.id + '" has focus.');   
            });
        });
    }
});

…or see this working TinyMCE Fiddle »

旁白：您的 Fiddle 没有正确初始化编辑器，因为插件加载失败。由于您不需要此示例的插件，我将其从 Fiddle 中删除以使其正常工作。

TinyMCE 3 - 触发模糊事件的文本区域 ID

TinyMCE 3 - textarea id which fired blur event

tinymce

tinymce-3

简化