保存选择以供以后在 JS 中使用
Posted
技术标签:
【中文标题】保存选择以供以后在 JS 中使用【英文标题】:Saving a selection for later use in 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。
【参考方案1】:
我会推荐使用其他一些代码荧光笔。比如CodeMirror。
【讨论】:
该脚本似乎没有做我需要它做的事情,我有自己的解析器我想使用。这里的问题是我需要知道是否可以在 onkeyup 侦听器中保存范围,或者是否有更好的方法来实现。【参考方案2】:不确定您是否愿意使用 JS 框架,但 mootools 有一些非常漂亮的选择实用程序(例如,http://mootools.net/docs/more/Element/Element.Forms#Element:getCaretPosition)
【讨论】:
以上是关于保存选择以供以后在 JS 中使用的主要内容,如果未能解决你的问题,请参考以下文章