单击后如何防止从文本中删除选择？

Question

我正在开发一个管理面板，其中的输入是可编辑的 divs。我还有一个工具栏（包含一些格式按钮），如果您在 div 中有任何选定的文本，它就会显示，如果没有，它将被删除。

问题是，当我单击工具栏中的任何按钮时，文档中的选择将被删除，因此我无法在文本前后插入标签。

我可以阻止这种行为吗，或者有什么解决方法吗？

Answer 1

我通常通过跟踪可编辑控件内的光标更改位置来处理此类情况。设置一个变量来保存最后一个位置，随着每个位置的变化更新它，然后从工具栏的事件中读取变量。

我对 JS 的使用还不够了解这个副手的具体语法，但它在大多数情况下都是非常通用的东西。

Answer 2

我通过在 mouseup 之后将范围变量保存到 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;
});

Answer 3

用户单击按钮时选择丢失并非不可避免。我知道避免它的两种方法是：

在按钮上使用 mousedown 而不是 click 事件并阻止事件的默认操作
使按钮不可选择。

参见。

单击后如何防止从文本中删除选择？

How can I prevent removing the selection from text after a click?

javascript

events

text

click

selection