How can I get the user to select a range in text?

Question

Let's say I'm making a site like wikipedia, where users can put [citation needed] on pieces of text that they think need citations. My basic solution would be to make every sentence into a link, and when clicked, it would put a [citation needed] after it.

But I don't like that solution, because it works at sentence-level. If a user wants to [citation needed] multiple sentences, or maybe part of a sentence, it wouldn't work. So I'm thinking, it would be cool if I could have the user select an arbitrary range, like they would in a normal text editor.

I have one extra constraint: the user cannot edit the text. I can't even let them think they can edit the text, so I'd rather avoid and if I can. It's weird, I know.

I'd imagine it's possible because google docs does it, but I'm not sure. Is this even possible? Is it possible outside of a textarea? What are my options here?

Thanks!

google docs doesn't use the standard dom, they have they're own low-high level system that ties into OTs for revisioning... document.getSelection() will return a Range of all the text selected. you can wrap that in a tag, or append a citation after the extentNode — dandavis, Oct 04 '13 at 19:32

score 1 · Accepted Answer · edited May 23 '17 at 11:52

You can set a format like(if you allow to edit):

This is my paragraph.[This contains almost 100 characters][citation needed].

so square bracket will represent this range need the citation.

or you can get the user selected text and format it accordingly like:

See here for working jsFiddle

function getSelectionText() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    alert(html);
}

Code taken from Tim Down: Return HTML from a user-selected text

That would be pretty cool, but I can't actually let them edit the text. It now occurs to me, I didn't say that in my original question... I'll edit it in now. — Verdagon, Oct 04 '13 at 19:33
this is pretty awesome! works beautifully. i can't have contenteditable="true" but it still works perfectly when I remove that part. thanks! — Verdagon, Oct 04 '13 at 19:48

How can I get the user to select a range in text?

1 Answers1