Databases
StackOverflow2013
Postsdbo
POCalculating the absolute start and finish of a range (highlighted text) within an editable div
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCalculating the absolute start and finish of a range (highlighted text) within an editable div
    primarykey
    data
    text
    <p>I'm running an experiment to see if I can return that absolute start and end points of a highlighted block of test within a contentEditable (not actually important to the test) div. I'm not building a rich text editor or anything I just want to know how it's done! So all I want to return upon right click (not important, I'm just messing with that too) are two numbers, the absolute distance from the start of the wrapper div to the start of the selection and the absolute distance from the start of the wrapper div to the end of the selection.</p> <p>I thought Mootools would make this easy but I could only get their implementation to work with forms (i.e. textarea, input etc). So I had a quick bash using Google, and it all worked fine when no tags were involved, e.g. He|llo Wor|ld (where the pipe, |, represents the highlighted range) would return [2, 9] which is correct. However, the moment I add tags to the div to allow colours / formatting these numbers do not make any sense as the range only gives position relative to text nodes and not an absolute value. Any ideas how to get this? I can only imagine it involves some form of horrendous DOM manipulation.</p> <p>JS:</p> <pre><code>window.addEvent('domready', function() { document.body.addEvent('contextmenu', function(e) { e.stop(); } ); if(!window.SelectionHandler) { SelectionHandler = {}; } SelectionHandler.Selector = {}; SelectionHandler.Selector.getSelected = function() { var userSelection = ''; if(window.getSelection) { userSelection = window.getSelection(); } else if(document.getSelection) { userSelection = document.getSelection(); } else if(document.selection) { userSelection = document.selection.createRange(); } return userSelection; } SelectionHandler.Selector.getText = function(userSelection) { var selectedText = userSelection; if(userSelection.text) { selectedText = userSelection.text; } return selectedText; } SelectionHandler.Selector.getRange = function(userSelection) { if(userSelection.getRangeAt &amp;&amp; typeof(userSelection.getRangeAt) != 'undefined') { var selectedRange = userSelection.getRangeAt(0); } else { var selectedRange = document.createRange(); selectedRange.setStart(userSelection.anchorNode, userSelection.anchorOffset); selectedRange.setEnd(userSelection.focusNode, userSelection.focusOffset); } return selectedRange; } $('mydiv').addEvent('mousedown', function(event) { if(event.rightClick) { var userSelection = SelectionHandler.Selector.getSelected(); var selectedText = SelectionHandler.Selector.getText(userSelection); var selectedRange = SelectionHandler.Selector.getRange(userSelection); // New ranges to add identifiable nodes (must be in that order!?) var endRange = document.createRange(); endRange.setStart(selectedRange.endContainer, selectedRange.endOffset); endRange.insertNode(document.createTextNode('!~')); var startRange = document.createRange(); startRange.setStart(selectedRange.startContainer, selectedRange.startOffset); startRange.insertNode(document.createTextNode('~!')); // Find the position of our new identifiable nodes (and account for their removal) var div_content = $('mydiv').get('html'); var start = div_content.indexOf('~!'); var end = div_content.indexOf('!~') - 2; // Remove our identifiable nodes (DOESN'T WORK) //startRange.deleteContents(); //endRange.deleteContents(); // This does work, but obviously loses the selection div_content = div_content.replace('~!', '').replace('!~', ''); $('mydiv').set('html', div_content); console.log(start + ' vs ' + end); } } ); } ); </code></pre> <p>HTML:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Edit Range Test&lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript" src="mootools.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="edit_range.js"&gt;&lt;/script&gt; &lt;style&gt; #mydiv { width: 400px; height: 400px; border: 1px solid #a2a2a2; padding: 5px; } &lt;/style&gt; &lt;body&gt; &lt;h1&gt;Edit Range Test&lt;/h1&gt; &lt;div id="mydiv" contentEditable="true"&gt;&lt;span style="color: red;"&gt;Hello&lt;/span&gt; World! &lt;span style="color: red;"&gt;Hello&lt;/span&gt; World! &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>So when I now select He|llo Wor|ld (where the pipe, |, again represents the highlighted range) it would return [2, 4] when I want [28, 42].</p> <p><strong>EDIT: I've updated the code to clarify what I am trying to do. It does most of what I wanted to test, but loses the selection and is very scruffy!</strong></p> <p>Thanks in advance!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPaul Norman
    1. USPaul Norman
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCalculating the absolute start and finish of a range (highlighted text) within an editable div
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO+1 for someone that wants to learn "how it's done", not someone who wants the code that "just does it".
      singulars
      1. POCalculating the absolute start and finish of a range (highlighted text) within an editable div
      1. USDaniel Szabo
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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