單擊后如何防止從文本中刪除所選內容？

Question

我正在管理輸入內容可編輯的div的管理面板。 我還有一個工具欄（包含一些格式按鈕），如果您在div中有任何選定的文本，則會顯示該工具欄，否則將被刪除。

問題是，當我單擊工具欄上的任何按鈕時，文檔中的選擇將被刪除，因此我無法在文本前后插入例如標簽。

我可以防止這種行為嗎，或者有任何解決方法？

Answer 1

當用戶單擊按鈕時，選擇丟失是不可避免的。 我知道避免這種情況的兩種方法是：

• 使用mousedown而不是按鈕上的click事件，並阻止事件的默認操作
• 使按鈕不可選。

參見https://stackoverflow.com/a/11787147/96100 。

Answer 2

我通常通過跟蹤可編輯控件中的光標更改位置來處理此類情況。 設置一個變量以保留最后一個位置，隨着位置的變化對其進行更新，然后從工具欄的事件中讀取該變量。

我對JS的了解不夠充分，不了解此語法的具體語法，但是在大多數情況下，這是相當普通的東西。

Answer 3

我通過在mouseup之后將range變量保存到window變量（全局）中進行了修復。 然后使用它來查找和替換元素。 而且有效！

我使用此函數來定義是否選擇了一個字符串：

function isTextSelected(input) {
    var sel,range,selectedText;
    if(window.getSelection) {
        sel = window.getSelection();
        if(sel.rangeCount) {
            range = sel.getRangeAt(0);
            selectedText = range.toString();
            if(selectedText.length) {
                window._selection = range; // <-- This line saved my life! :)
                return true;
            }
        }
    }
}

這是“ B”按鈕的代碼：

$('.editor-icon.b').click(function(e){
    var element = document.createElement('b');
    var selectedText = document.createTextNode(window._selection.toString());
    element.appendChild(selectedText);
    window._selection.deleteContents();
    window._selection.insertNode(element);
    window._selection = false;
});