javascript contenteditable 选定的文本保存和恢复
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4687808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
contenteditable selected text save and restore
提问by Hussein
I came across this post that shows 2 functions on how to save and restore selected text from a contenteditable div. I have the below div set as contenteditable and the 2 function from the other post. How to i use these functions to save and restore selected text.
我看到了这篇文章，它展示了 2 个关于如何从 contenteditable div 中保存和恢复选定文本的函数。我将下面的 div 设置为 contenteditable 和另一篇文章中的 2 函数。我如何使用这些功能来保存和恢复选定的文本。
<div style="width:300px;padding:10px;" contenteditable="true">test test test test</div>
<script>
function saveSelection() {
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if (window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
</script>
回答by Tim Down
A typical use would be displaying some kind of widget or dialog to accept input from the user (thus potentially destroying the original selection) and restoring the selection after that widget has been hidden. Actually using the functions is quite simple; the biggest danger is trying to save the selection after it has already been destroyed.
一个典型的用途是显示某种小部件或对话框来接受来自用户的输入（因此可能会破坏原始选择）并在该小部件隐藏后恢复选择。实际上使用这些功能非常简单；最大的危险是在选择已经被破坏后试图保存它。
Here's a simple example. It displays a text input and overwrites the selection in the editable <div>with the text from that input. There's too much code to paste in here, so here's the full code: http://www.jsfiddle.net/timdown/cCAWC/3/
这是一个简单的例子。它显示一个文本输入并用该输入中的文本覆盖可编辑中的选择<div>。这里要粘贴的代码太多了，所以这里是完整的代码：http: //www.jsfiddle.net/timdown/cCAWC/3/
Extract:
提炼：
<div id="test" contenteditable="true">Some editable text</div>
<input type="button" unselectable="on" onclick="displayTextInserter();"
value="Insert text">
<div id="textInserter">
<input type="text" id="textToInsert">
<input type="button" onclick="insertText()" value="Insert">
</div>
<script type="text/javascript">
var selRange;
function displayTextInserter() {
selRange = saveSelection();
document.getElementById("textInserter").style.display = "block";
document.getElementById("textToInsert").focus();
}
function insertText() {
var text = document.getElementById("textToInsert").value;
document.getElementById("textInserter").style.display = "none";
restoreSelection(selRange);
document.getElementById("test").focus();
insertTextAtCursor(text);
}
</script>
回答by Nedudi
just one recommendation:
只有一个建议：
it is hard to work with native browser selection + contenteditable + handle all different browser aspects + save and restore selection and etc from scratch..
很难使用本机浏览器选择 + contenteditable + 处理所有不同的浏览器方面 + 从头开始保存和恢复选择等..
I would recomend rangyhttps://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
that specially done to make all hard work with selection for you
我会推荐rangy https://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
专门用来为您进行选择的所有艰苦工作
check the docs, it is easy to use ;) hope it will help you
检查文档，它很容易使用 ;) 希望它会帮助你
