Javascript富文本编辑器，点击按钮后内容可编辑区域失去焦点

Question

我有一个简单的 javascript 富文本编辑器，仅包含具有以下 onclick 的粗体按钮：

  document.execCommand('bold', false)

还有简单的html...

<div contenteditable="true">

我的问题是当我点击粗体按钮时，文本区域失去了焦点，有什么解决办法吗？

Answer 1

焦点移动到按钮上，因此您需要取消单击操作，这样焦点就不会丢失在内容可编辑元素中。

document.querySelector(".actions").addEventListener("mousedown", function (e) {
  var action = e.target.dataset.action;
  if (action) {
    document.execCommand(action, false)
    //prevent button from actually getting focused
    e.preventDefault();
  }
})

[contenteditable] {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

<div class="actions">
  <button data-action="bold">bold</button>
  <button data-action="italic">italic</button>
</div>
<div contenteditable="true"></div>

Answer 2

答案更新

查看this answer，您可以保存和恢复当前的 contenteditable 位置，将 blur 事件侦听器添加到您的 contenteditable

一个例子：

//
// restore position after click
//
document.getElementById('btn').addEventListener('click', function(e) {
    restoreSelection(cpos);
})
//
// save position on blur
//
document.querySelector('div[contenteditable="true"]').addEventListener('blur', function(e) {
    cpos = saveSelection();
})



function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}
var cpos = -1;

<button id="btn">Make bold</button>
<div contenteditable="true">
    this is the text
</div>