StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>First, the information you get from <code>Range</code> objects are about as useful as you can get: for each of the start and end boundaries of the Range you get a DOM node and an offset within that node (a character offset inside a text or comment node or a child node offset otherwise), which completely describes the boundary. What you mean by "absolute start and end points" I imagine is two character offsets within the whole editable element, but that is a slippery concept: it seems simple, but is tricky to pin down. For example, how many characters does a paragraph break count for? A <code><br></code>? An <code><a></code> element with <code>display: block</code>? Elements such as <code><script></code> elements that contain text but are not visible to the user? Elements hidden via <code>display: none</code>? Elements outside the normal document flow, such as those positioned via <code>position: absolute</code>? Multiple consecutive whitespace characters that are rendered as a single visible character by the browser?</p> <p>Having said all that, I have recently had a go at writing code to do this, and yes, it does involve DOM manipulation (although not <em>that</em> horrendous). It's extremely rudimentary and doesn't deal satisfactorily with any of the above issues, partly because I knocked it up quite quickly for a question on SO, and partly because in general I don't think it's possible to deal nicely in general with all those issues. The following answer provides functions for saving and restoring the selection as character indices within an editable element: <a href="https://stackoverflow.com/questions/5595956/replace-innerhtml-in-contenteditable-div/5596688#5596688">replace innerHTML in contenteditable div</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload