单击后如何防止从文本中删除所选内容？

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;
});