contenteditable 选定的文本保存和恢复

本文介绍了contenteditable 选定的文本保存和恢复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我看到这篇文章，其中展示了 2 个关于如何从内容可编辑的 div 中保存和恢复所选文本的功能.我将下面的 div 设置为 contenteditable 和另一篇文章中的 2 函数.我如何使用这些功能来保存和恢复选定的文本.

解决方案

一个典型的用途是显示某种小部件或对话框来接受来自用户的输入(从而可能破坏原始选择)并在该小部件之后恢复选择已被隐藏.实际上使用这些功能非常简单；最大的危险是在选择已经被销毁后试图保存它.

这是一个简单的例子.它显示一个文本输入并用来自该输入的文本覆盖可编辑

中的选择.这里要粘贴的代码太多了，所以这里是完整的代码:www.jsfiddle/timdown/cCAWC/3/

提取:

<div id="test" contenteditable="true">一些可编辑的文本</div><input type="button" unselectable="on" onclick="displayTextInserter();"值="插入文本"><div id="textInserter"><input type="text" id="textToInsert"><input type="button" onclick="insertText()" value="Insert">

<script type="text/javascript">变量选择范围；函数 displayTextInserter() {selRange = saveSelection();document.getElementById("textInserter").style.display = "block";document.getElementById("textToInsert").focus();}函数插入文本(){var text = document.getElementById("textToInsert").value;document.getElementById("textInserter").style.display = "none";恢复选择(selRange)；document.getElementById("test").focus();insertTextAtCursor(文本)；}

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.

<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>

解决方案

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: www.jsfiddle/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>