contenteditable selected text save and restore

Question

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>

Solution 1

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/

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>

Solution 2

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

I would recomend rangy https://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule
that specially done to make all hard work with selection for you

check the docs, it is easy to use ;) hope it will help you

Comments

[Imran Naqvi]

+1, I was looking for exactly this solution. Thanks you made my day.

[Andy]

@TimDown - Tim, how would you use the saveSelection() and restoreSelection(range) in a way that you can target the contenteditable div ? i.e. so it's like saveSelection('mycontentId')` and restoreSelection(range, 'mycontentId') ? I am trying to use it on two seperate 'div's and I need to target each ? Is there any way to incorporate getElementById in the two functions so I can target ?

[Tim Down]

@Andy: The selection is bound to the document, not individual elements but there's nothing to stop you saving multiple different selections. Could you give a concrete example of what you'd like to achieve?

[Andy]

@TimDown - thanks for the response! :) Basically, trying to save by elementId ? So that I could, for example, call and restore it on 2 different elementId's ? i.e. like saveSelection('mycontentId') and then restoreSelection('mycontentId') and then simply enter the elementId that I want to save and restore to use it multiple times ? I would use your awesome plugin rangy - however, I really only need this function and the lib size is probably too big

[Tim Down]

@Andy: Oh, I see what you mean. I think I'd just use a simple object as a hash: something like var selectionsById = {}; selectionsById['mycontentId'] = saveSelection(); restoreSelection(selectionsById['mycontentId']);.

[DiChrist]

Very good! But how can I use this using a textarea instead the div with id "test"?

[ZirkoViter]

Notice that document.selection gives a compilation error in TypeScript because document.selection is present in the example specially for IE.

[undead10]

Genius, you saved my day!