What I do is I check if the mouse is outside the editor area before doing the blur. If it's not outside the editor area it means the blur event comes from a dialog opening so I do nothing.
//onBlur listener
MyComponent._handleBlur = function (event)
{
var editor = event.editor;
//blur only if the mouse is outside the ckeditor container.
if(MyComponent._isMouseOutsideElement(event.editor.container.$))
{
editor.__hasFocus = false;
//do your stuff
}
}
//onFocus listener
MyComponent._handleFocus = function (event)
{
var editor = event.editor;
//focus only if it doesn't already have the focus.
if(!editor.__hasFocus)
{
editor.__hasFocus = true;
//do your stuff
}
}
//mousemove listener that saves the mouse position.
MyComponent._onMouseMove = function(event)
{
var posx = 0;
var posy = 0;
if (event.pageX || event.pageY)
{
posx = event.pageX;
posy = event.pageY;
}
else if (event.clientX || event.clientY)
{
posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
MyComponent._mousePosition = [posx, posy];
}
//find the absolute position of an element in a document
MyComponent._getElementPosition = function (element)
{
var x = 0;
var y = 0;
do
{
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent
}
while (element);
return [x,y];
}
//indicate if the mouse is outside the editor
MyComponent._isMouseOutsideElement = function (element)
{
var positionEditor = MyComponent._getElementPosition(element)
var top = positionEditor[1];
var bottom = top + parseInt(window.getComputedStyle(element,null).height);
var left = positionEditor[0];
var right = left + parseInt(window.getComputedStyle(element,null).width);
var mouseX = MyComponent._mousePosition[0];
var mouseY = MyComponent._mousePosition[1];
return mouseX <= left || mouseX >= right || mouseY <= top || mouseY >= bottom;
}
document.onmousemove = MyComponent._onMouseMove;
editor.on('focus', ULDhtmlRichTextEditorPeer._handleFocus);
editor.on('blur', ULDhtmlRichTextEditorPeer._handleBlur);
This is pretty interesting idea, but it has some flaws. For example will fail for dialogs opened by keystrokes or deferred dialogs - whatever that allow to open dialog without mouse.
In CKEditor 4 which will be release very soon we fixed this issue differently. There's so called focus manager which listens on focus/blur on all UI parts (we're registering them manually - no logic here). If there's a blur which isn't followed within 200ms by focus, focus manager changes editor's state to blurred.
I'm seeing the blur event firing when I click on the toolbar itself (not one of the buttons/controls within it), and also when a dialog opens.
I'm having a devil of a time trying to come up with a reliable test for whether a dialog is open/opening. The only one I'm dealing with right now is the "Link" dialog, but I'm guessing the same issue will apply to others.
What I'm trying to do is save the text when the user truly blurs out of the editor. That would mean leaving it to move to some other element in the page, but not by clicking on anything in the toolbar, which means they are still working on the text.
Is this a known issue? I see a lot of posts out there where people have come up with hacks, but none look reliable to me. I'm happy to provide more information if it would be helpful.
Re: Blur and focus fired when opening/closing dialogs
What I do is I check if the mouse is outside the editor area before doing the blur. If it's not outside the editor area it means the blur event comes from a dialog opening so I do nothing.
//onBlur listener MyComponent._handleBlur = function (event) { var editor = event.editor; //blur only if the mouse is outside the ckeditor container. if(MyComponent._isMouseOutsideElement(event.editor.container.$)) { editor.__hasFocus = false; //do your stuff } } //onFocus listener MyComponent._handleFocus = function (event) { var editor = event.editor; //focus only if it doesn't already have the focus. if(!editor.__hasFocus) { editor.__hasFocus = true; //do your stuff } } //mousemove listener that saves the mouse position. MyComponent._onMouseMove = function(event) { var posx = 0; var posy = 0; if (event.pageX || event.pageY) { posx = event.pageX; posy = event.pageY; } else if (event.clientX || event.clientY) { posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; } MyComponent._mousePosition = [posx, posy]; } //find the absolute position of an element in a document MyComponent._getElementPosition = function (element) { var x = 0; var y = 0; do { x += element.offsetLeft; y += element.offsetTop; element = element.offsetParent } while (element); return [x,y]; } //indicate if the mouse is outside the editor MyComponent._isMouseOutsideElement = function (element) { var positionEditor = MyComponent._getElementPosition(element) var top = positionEditor[1]; var bottom = top + parseInt(window.getComputedStyle(element,null).height); var left = positionEditor[0]; var right = left + parseInt(window.getComputedStyle(element,null).width); var mouseX = MyComponent._mousePosition[0]; var mouseY = MyComponent._mousePosition[1]; return mouseX <= left || mouseX >= right || mouseY <= top || mouseY >= bottom; } document.onmousemove = MyComponent._onMouseMove; editor.on('focus', ULDhtmlRichTextEditorPeer._handleFocus); editor.on('blur', ULDhtmlRichTextEditorPeer._handleBlur);Re: Blur and focus fired when opening/closing dialogs
In CKEditor 4 which will be release very soon we fixed this issue differently. There's so called focus manager which listens on focus/blur on all UI parts (we're registering them manually - no logic here). If there's a blur which isn't followed within 200ms by focus, focus manager changes editor's state to blurred.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
Still having blur issues with latest version
I realize that this is an old thread, but I'm using the lastest version of CKEditor, and there still seem to be issues with the blur event.
I'm loading these versions from CDN:
.script("//cdn.ckeditor.com/4.4.6/full-all/ckeditor.js")
.script("//cdn.ckeditor.com/4.4.6/full-all/adapters//jquery.js")
I'm seeing the blur event firing when I click on the toolbar itself (not one of the buttons/controls within it), and also when a dialog opens.
I'm having a devil of a time trying to come up with a reliable test for whether a dialog is open/opening. The only one I'm dealing with right now is the "Link" dialog, but I'm guessing the same issue will apply to others.
What I'm trying to do is save the text when the user truly blurs out of the editor. That would mean leaving it to move to some other element in the page, but not by clicking on anything in the toolbar, which means they are still working on the text.
Is this a known issue? I see a lot of posts out there where people have come up with hacks, but none look reliable to me. I'm happy to provide more information if it would be helpful.
Thanks,
M.