单击其他元素时不要失去焦点

我正在为一个项目编写一个小的“就地编辑器”,但在保持焦点和模糊方面遇到了两个问题。 我做了一个小提琴来更好地解释我的问题:

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

(1)当您在一个contenteditable元素内单击时,会出现一个小工具栏。 单击工具栏时,当前正在编辑的元素会在短时间内失去焦点。 有办法规避吗? (这实际上是一个UX问题)

(2) blur时工具栏应该消失。 但这会导致工具栏不起作用。 如果您单击工具栏上的某些内容,则会发生blur事件…当用户单击工具栏时,有哪些(有点)最佳做法不模糊?

提前致谢,

塞巴斯蒂安

解决方案非常简单……只需添加超时即可“保护菜单”。 更新了小提琴。

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

你遇到了深刻的问题:)在去体面的所见即所得编辑的路上的maaany之一。

在CKEditor中我们通过以下方式解决了它:

  1. focusManager – 首先我们注册属于编辑器UI的元素。 其次,我们在这些元素上听模糊/焦点事件。 第三,我们在模糊事件之后等待一段时间,因为焦点可能在它之后被触发。 第四,我们触发自定义fire / blur事件(在编辑器实例上,而不是在DOM元素上),像工具栏一样监听。

  2. 第二部分,我相信我们在CKEditor 4 beta中跳过,将选择标记保留在可编辑状态。 这是因为在大多数浏览器中,即使在单击工具栏后,选择(甚至可视)仍保留在可编辑状态。 也许那是因为我们使用了一些特殊的属性/ JS代码来防止在那里移动选择 – 不幸的是我不知道。

  3. 最后一件事是将选择锁定在可编辑状态。 将焦点移动到工具栏时不应该丢失它,我相信IE和Opera在这里失败了。 所以我们在CKEDITOR.dom.selection有特殊的方法来锁定和恢复选择。 它们被听众用于可编辑的focus/blur