Saving a selection for later use in JS

Question

I've got a rich text editor in an iframe with designMode that does syntax highlighting for small blocks of text. I'd like it to update the highlighting on keyup, but messing with the DOM causes the frame to blur, thus every time you push a key the caret disappears and you can't type anymore. That wouldn't be a problem if the parser could remember where the caret is, and then refocus the iframe and replace the caret. I've read up on getSelection() and its relatives, but apparently onkeyup removes the selection, at least in Chrome - calling getSelection() inside an onkeyup always yields a null selection. Is there a way around this?

This is what I have:

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

Which editor are you using? Is this an existing one or one of your own? — Mathieu Rodic, Jul 18 '11 at 00:45
Is this only for Gecko browsers? You should be feature testing more than you are. Where does the *wind* object come from in `addRange(wind.range)`? — RobG, Jul 18 '11 at 01:56
This is an editor I'm writing myself in Chrome, although ideally for all browsers (except IE). As for wind, my mistake - wind used to hold the window object for the iframe before I realized it'd be easier to have the function inside the frame itself. Removed from above; it shouldn't have been there although it wasn't the error. — Monchoman45, Jul 18 '11 at 02:34
Turns out onkeyup causes getSelection to return a null selection, at least in Chrome. Is there a way around that? — Monchoman45, Jul 18 '11 at 21:20

score 0 · Answer 1 · answered Jul 28 '11 at 15:57

0

I would recommend to use some other code highlighter. Like CodeMirror for example.

answered Jul 28 '11 at 15:57

Kalle H. Väravas

3,579
4
30
47

That script doesn't appear to do what I need it to do, I have my own parser I'd like to use. The problem here is I need to know if it's possible to save a range in an onkeyup listener, or if there's a better way to accomplish that. – Monchoman45 Jul 29 '11 at 15:51

score 0 · Answer 2 · answered Nov 07 '11 at 20:34

0

not sure if you're open to using a JS framework, but mootools has some pretty nifty selection utilities (e.g., http://mootools.net/docs/more/Element/Element.Forms#Element:getCaretPosition)

answered Nov 07 '11 at 20:34

momo

3,885
4
33
54

Saving a selection for later use in JS

2 Answers2