Don't lose focus when clicking another element

问题:

I am coding a small "in-place-editor" for a project, but ran into two problems with keeping the focus and bluring. I made a fiddle to explain my problem better:

http://jsfiddle.net/distractedBySquirrels/ufbtC/

(1) When you click inside an contenteditable element, a small toolbar appears. When clicking the toolbar the element, which is currently under editing loses focus for a short time. Is there a way to circumvent that? (It's actually rather an UX problem)

(2) The toolbar should disappear when blur. But this causes the toolbar to not work. If you click something on the toolbar the blur event occurs... what is the (kinda) best practice to not blur when a user is clicking the toolbar?

Thanks in advance,

Sebastian

回答1:

The solution is pretty simple... just add an timeout to "protect the menu". Updated the fiddle.

    protect: function (e) {
        e.preventDefault()
        return setTimeout(300)
    }   

回答2:

You've ran into deep problem :) One of maaany on the way to decent wysiwyg editor.

In CKEditor we've got it solved by:

1. focusManager - first we register elements that are part of the editor's UI. Second, we listen on blur/focus events on these elements. Third, we wait a while after blur event, because focus may be fired just after it. Fourth, we fire our custom fire/blur events (on editor instance, not on the DOM element) on which things like toolbar listen.

2. Second part, which I believe we skipped in CKEditor 4 beta, is keeping the selection mark in the editable. That's because in most of the browsers selection (even visually) is kept in the editable, even after clicking in toolbar. Maybe that's because we use some special attributes/JS code to prevent moving selection there - I don't know, unfortunately.

3. The last thing is locking the selection in editable. It shouldn't be lost when you move focus to the toolbar and I believe that IE and Opera fail here. So we've got special methods in CKEDITOR.dom.selection for locking and restoring the selection. They are used by listener on focus/blur of the editable.