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

Question

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

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

（1）当您在contenteditable元素内单击时，会出现一个小工具栏。单击工具栏时，当前正在编辑的元素会在短时间内失去焦点。有办法规避吗？ （这实际上是一个用户体验问题）

（2）blur时工具栏应消失。但这会导致工具栏不起作用。如果单击工具栏上的某些内容，则会发生blur事件...当用户单击工具栏时，（有点）最佳做法是什么不模糊？

提前致谢，

塞巴斯蒂安

Answer 1

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

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

Answer 2

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

在CKEditor中，我们通过以下方式解决了问题：

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

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

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