保存选择以供以后在 JS 中使用答案

【问题标题】：Saving a selection for later use in JS保存选择以供以后在 JS 中使用
【发布时间】：2011-10-07 08:24:01
【问题描述】：

我在带有 designMode 的 iframe 中有一个富文本编辑器，可以对小块文本进行语法高亮显示。我希望它更新 keyup 上的突出显示，但是弄乱 DOM 会导致框架模糊，因此每次你按下一个键时插入符号就会消失，你不能再打字了。如果解析器能够记住插入符号的位置，然后重新聚焦 iframe 并替换插入符号，那将不是问题。我已经阅读了getSelection() 及其亲属，但显然 onkeyup 删除了选择，至少在 Chrome 中 - 在 onkeyup 中调用 getSelection() 总是会产生一个空选择。有没有办法解决这个问题？

这就是我所拥有的：

<iframe>
    <html>
        <head>
            <script>
                function parse() {
                    if(window.getSelection().type != 'None') {
                        var range = window.getSelection().getRangeAt(0);
                    }
                    var text = document.body.textContent;
                    //Parse text, output is stored in newtext
                    document.body.innerHTML = newtext;
                    document.body.focus();
                    if(range) {
                        window.getSelection().removeAllRanges();
                        window.getSelection().addRange(range);
                    }
                }
            </script>
        </head>
        <body onload="document.designMode = 'on'; document.onkeyup = parse;">
            Text entered appears here
        </body>
    </html>
</iframe>

【问题讨论】：

您使用的是哪个编辑器？这是现有的还是您自己的？
这仅适用于 Gecko 浏览器吗？你应该比你更多地进行功能测试。 addRange(wind.range)中的wind对象从何而来？
这是我自己在 Chrome 中编写的编辑器，尽管它适用于所有浏览器（IE 除外）。至于风，我的错误 - 在我意识到将函数放在框架本身内部会更容易之前，风曾经为 iframe 保存窗口对象。从上面移除；尽管不是错误，但它不应该存在。
原来 onkeyup 导致 getSelection 返回一个空选择，至少在 Chrome 中是这样。有办法解决吗？
好吧，如果我是你，我会使用输入框，而不是 iframe。

标签： javascript html selection textselection getselection

【解决方案1】：

我会推荐使用其他一些代码荧光笔。比如CodeMirror。

【讨论】：

该脚本似乎没有做我需要它做的事情，我有自己的解析器我想使用。这里的问题是我需要知道是否可以在 onkeyup 侦听器中保存范围，或者是否有更好的方法来实现。

【解决方案2】：

不确定您是否愿意使用 JS 框架，但 mootools 有一些非常漂亮的选择实用程序（例如，http://mootools.net/docs/more/Element/Element.Forms#Element:getCaretPosition）

【讨论】：