Question

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

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

我可以阻止此行为，还是有解决方法？

Answer 1

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

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

请参阅https://stackoverflow.com/a/11787147/96100。

Answer 2

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

我不使用JS足以知道这个副手的具体语法，但它在很大程度上是相当普遍的东西。

Answer 3

我通过在mouseup之后将range变量保存到窗口变量（全局）中来修复它。然后使用它来查找和替换元素。它有效！

我使用此函数来定义是否选择了字符串：

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

这是＆＃34; B＆＃34;的代码。按钮：

$('.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;
});

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

3 个答案: