D
D
dnv7772012-02-17 01:55:47
JavaScript
dnv777, 2012-02-17 01:55:47

TinyMCE : how to catch onBlur

I've been trying for several hours to catch the onblur event in TinyMCE) To no
avail ...
All advice boils down to:

  1. tinymce.dom.Event.add(doc, 'blur', function(e){...
    only works in FF. Doesn't work in IE9, Chrome, Opera, Safari
  2. check in handle_event_callback event.type=='blur'
    well, it doesn't produce such event 'blur', only 'key' and 'click' at least in IE9 and Chrome, there was no point in checking others
  3. use onDeactivate events does
    not catch. and it shouldn’t ... not that event

Is the latest version 3.4.8

someone faced with this, how did you solve this issue?
Answer found


After playing around, I did something like this:

Solution 1:


setup: function (ed) {
  ed.onInit.add(function (ed) {
    jQuery('body', ed.getDoc()).blur(function (ev) {
        alert('blur');
    });
  });
}

everything would be fine, yes with IE The problem is, it triggers this event everywhere inside the iframe, when clicking on a button, on an empty field ...
and at the same time, both ev.target and ev.currentTarget always refer to the body, so to determine where clicked on which -then the element is inside the frame, or outside it does not work.
We'll have to look for a more universal solution ...

Final Solution


I remove from the settings 'setup' and 'onchange_callback' (this one is called with every click on the buttons).
And after creating the tinyMCE window:
//сохраняем текущий текст 
$('#ourTextarea').data('text',$('#ourTextarea').html());
//вешаем событие document.onclick, чтоб отловить потерю фокуса
jQuery(document).on('click.tinymce',myTinyBlur);

function myTinyBlur(ev) {
  //проверяем не клацнули ли по какому-то объекту tinymce за пределами контейнера, например панели выбора цвета
  //придется избегать в своем коде id и className начинающихся с mce... другого варианта не нашел
  if ($(ev.target).closest("[id^='mce'],[class^='mce']").length > 0) return ;//это popup от tinymce
  $(document).off('click.tinymce'); //убираем document.onclick;
  var oldValue=$('#ourTextarea').data('text');
  
  //если до этого текст был взят из элемента, то желательно перед сравнением со старым значением
  //привести тэги в соотв. регистр, т.к. tinymce возвращает тэги в нижнем регистре. например так:
  var newValue=$('<div/>').html($('#ourTextarea').html()).html();//var newValue=$('#ourTextarea').html(); 

  if(oldValue != newValue) SAVE();
  //уничтожаем редактор
}


In general, it’s strange, the onchange_callback event was added, but onblur_ was shy…



at the end of bullying tinymce, Visual Studio turned to insults ... When typing 'ev' in the debugger, I accidentally switched the layout to Russian, it issued:
image

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question