I have a page that can contain CKEditor instances that allow inline editing. When clicking outside of these elements while they're being edited, I call blur() on the editable elements, which effectively takes away focus, causing the CKEditor toolbar to vanish like I want.
The problem I'm encountering is that this doesn't work right after showing the CKEditor context menu through a right-click. After the menu pops up and I click outside of the editable element, my call to blur() does not dismiss the editor. Instead, the editor toolbar remains. It seems that the context menu is forcing the editor to retain focus. Left-clicking inside of the element dismisses the context menu, but not clicking outside.
Is there a way for me to force an editor blur no matter what?
Solution?
I think I found the solution. Whereas blur on the element is causing inconsistent behavior, changing the focus seems to be correctly taking away focus from the editable elements consistently, i.e. document.body.focus().
Nope, not solution
Spoke to soon. Whereas document.body.focus() worked for IE, Chrome still has the same issue.
This happens because editor
This happens because editor moves from editable to context menu exactly in the same moment when you call editor.blur(). There's a focusManager which tracks focus events on UI parts and it sees that focus appeared in context menu so editor#blur does not influence the overall UI focus.
You can tell focusManger that blur occurred by calling editor.focusManager.blur(). Perhaps it would be even safer to pass true as an argument, because blur() by default waits 200ms before checking if focus() was called in the meantime. Although, it is still hard to predict how all that will work when context menu is opening. E.g. I tested:
CKEDITOR.instances.editor1.on( 'focus', function( evt ) { evt.editor.focusManager.blur( true ); } );And I right-clicked not yet focused editable. Toolbar was immediately hidden, but context menu remained which seems to be a correct behaviour.
Anyway, I don't what you want to achieve, so I cannot propose better solution, but I would avoid this kind of tricky situations.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
Partially worked
Thanks. Calling blur on the focusManager helped partially. It is forcing the toolbar to go away, but it leaves the caret. I am able to work around this by also employing the code in my earlier attempts. Hopefully I can also find a workaround for the context menu not going away as well (maybe there's an API call for dismissing it?).
What we're trying to achieve is really simple; clicking outside the element should restore the element to a non-editing state.