停止可编辑的内容散焦

Question

我目前正在将Froala文本编辑器实施到我的网站中。

除了当我单击button_bar div或它的孩子时， contenteditable div没有焦点，其他一切看起来都不错。 这是一个问题，因为我将背景色应用于contenteditable div的焦点状态。

单击同级div的子级buttons时，如何停止取消contenteditable div的选择？

视觉表示看起来像这样。

<div class='editor'>

    <div class="button_bar">
        <button>
        <button>
        <button>
        etc
    </div>

    <div contenteditable="true" class="content_area">
    </div>
</div>

有任何想法吗？ 谢谢。

Answer 1

尝试使用：

查看演示

$('.editor').on('click', function(e){
    if($(e.target).is('button'))
        $(this).find('div[contenteditable]').focus();
});

Answer 2

您可以通过单击任意按钮使div重新集中。 仍有一点点差距，焦点丢失了，但立即恢复了。

$('.button_bar button').click(function (e) {
    console.log('clicked');
    $('#content').focus(); // if we give the contendeditable div an id of 'content'
});