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

【问题标题】：TinyMCE 3 - textarea id which fired blur eventTinyMCE 3 - 触发模糊事件的文本区域 ID
【发布时间】：2015-04-02 13:28:39
【问题描述】：

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

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

例如，下面的代码在 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 */
	});
}

也许最好给出我正在努力完成的事情的背景：我们在一个表单上有多个文本区域，我们正在尝试使用名为“语言工具”的软件（使用 TinyMCE 3.5.6 版）进行“语法检查”。在失去对文本区域的关注时，我们希望为失去焦点的文本区域调用语法检查，然后在语法检查后将焦点返回到它应该去的地方。

我已经为此苦苦挣扎了很长一段时间，如果有任何反馈意见，我将不胜感激（即使这是关于以不同方式执行此操作的一般建议）。

非常感谢！

【问题讨论】：

那么...您找到解决方案了吗？

标签： tinymce tinymce-3

【解决方案1】：

简化

TinyMCE 在 Editor 对象上提供了一个属性，用于获取编辑器实例 ID：Editor.id

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

注意：我实际上发现逻辑未能在 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 中删除以使其正常工作。

【讨论】：