如果所选范围为空，则在光标处应用“选择”

Rangy applyToSelection at the cursor if the selected range is empty?

本文关键字：光标 应用 选择 范围 如果      更新时间：2023-09-26

这感觉像是一个愚蠢的问题。

我正在使用javascript中出色的Rangy库将CSS类从下拉列表中应用于选定的文本，就像在富文本编辑器中一样。

但是，如果用户只是键入文本而不进行选择，并且他们通过下拉列表应用类，则 ragy 的"applyToSelection"什么都不做，因为大概它是一个空范围。

我知道有一些困难的方法可以在选定的光标位置添加适当的div并输入它，但是，在我开始这些之前，我是否缺少一种简单的方法来做到这一点，无论是使用 Rangy 还是普通 JS？

谢谢！

这是我最终得到的代码，它在IE11中运行良好，但尚未在其他浏览器中进行测试：

        var actual_textarea = document.getElementById("my_input_textarea");
        actual_textarea.focus();
        var selectedInstance = this.ne.selectedInstance;
        var range = selection.getRangeAt(0);
        range.deleteContents();
        var new_div = document.createElement("div");
        new_div.innerHTML = "<div class='" + this.rangyClassPrefix + elm + "'></div>";
        var frag = document.createDocumentFragment();
        var node, lastNode;
        while (node = new_div.firstChild)
        {
            lastNode = frag.appendChild(node);
        }   
        range.insertNode(frag);
        if (lastNode)
        {
            range = range.cloneRange();
            range.selectNodeContents(lastNode);
            range.collapse(false);
            selection.removeAllRanges();
            selection.addRange(range);
        }

请注意，我首先设置了焦点，因为样式是通过对其他元素的焦点更改单击来应用的。

对于范围克隆是值而不是引用克隆的想法，我仍然有点模糊，但在添加时仍然可以完美运行，因为这违反直觉，但它确实有效。

谢谢！

相关文章：