Question

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

我在javascript中使用优秀的Rangy库将下拉列表中的CSS类应用于所选文本，就像在富文本编辑器中一样。

但是如果用户只是在没有做出选择的情况下输入文本，并且他们通过下拉列表应用了一个课程，那么他就会选择＆＃34; applyToSelection＆＃34;什么都不做，因为，据推测，这是一个空洞的范围。

我知道有很多方法可以在选定的光标位置添加一个合适的div并进入它，但是，在我开始使用之前，我是否错过了一种简单的方法，使用Rangy或普通的JS？ / p>

谢谢！

Answer 1

这是我最终使用的代码，它在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);
        }

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

我仍然有点模糊，因为范围克隆是有价值的而不是参考克隆，但是在添加时仍然能够完美地工作，因为这是违反直觉的，但确实有效。

谢谢！

如果所选范围为空，则在光标处使用rangy applyToSelection？

1 个答案: