[rangy-1.3] help moving a cursor around html elements in content editable div

[Aaron Miller]

i have a content editable div.  this div will contain text and <span> elements. inside the container span element will be more span elements and hidden input fields.  if the cursor is moved anywhere inside the span element, i want the cursor to move to the very outside and end of it.  i am having difficulty doing this.  can anyone assist?

the html:

<div contenteditable="true" class="mixedContainer" style="height: 120px; overflow: auto; font-size: 15px;">
   
This is my test. <span contenteditable="false" class="field mixed" hidefocus="true" unselectable="true"><span contenteditable="false" fieldid="33"><strong>(</strong><span>customer name</span><a class="fieldOptions"><span class="ui-icon-wrench" /></a><strong>)</strong></controls></span><input type="hidden" value="false" name="item_27828-line_72573-field_87798-33-bold"></span>

this is more text of my contentEditable div.
 
</div>

thanks!

[Casey Childers]

Hi Aaron,

I received an email from the rangy page (subscribed), and I feel I can assist you with this if needed.

What your needing is possible with rangy, you would have to get the element that the mouse is currently over, setting it up to check the contenteditable state, and when its false one would simply pass the element to rangy, and set the begin and end carets to 'after' the 'contenteditable=false' element. You would also want to make sure your caret reposition only happens when over the false contenteditable's, as inside the content editable you would have some issues when trying to type.

Do you have any javascript code to go alongside your provided html? Or are you needing someone to write this code for you?

Casey Childers

Phone #: 817-247-9109

www.Visual-Optics.com

2D Grahics, 3D Models, Bone Rigging, Basic Animation (2D / 3D), Web Designer & Developer (HTML, CSS, JS, PHP, MySQL Guru), Content Writer, Site Optimizer, Search Engine Optimizer, Web Analyzer, Project Manager, Hosting, VPS, If you need it done, I will figure out how to get it done.

--
You received this message because you are subscribed to the Google Groups "rangy" group.
To unsubscribe from this group and stop receiving emails from it, send an email to rangy+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Aaron Miller]

this is my function so far:

function moveToValidPosition($container){
            var sel,range,startnode,parent;
           
            var sel = rangy.getSelection();
         
            if(sel.rangeCount < 1){
                return false;
            }
           
            range = sel.getRangeAt(0);
           
            startnode = range.startContainer;

            if(startnode === $container) {
                return true;
            }
           
            while(startnode !== $container){
                parent = startnode.parentNode;
           
                if(parent === null){
                    return false;
                }
               
                if(parent.nodeType === 1 && /field/.test(parent.className)){
                    range.selectNode(parent);
                   
                    range.collapse(false);
                   
                    sel.setSingleRange(range);
                }
               
                startnode = parent;
            }
           
            sel.refresh();
           
            range = sel.getRangeAt(0);
           
            if(range.isCollapsed){
                return true;
            }
           
            endnode = range.startContainer;
           
            if(endnode === $container){
                return true;
            }
           
            while(endnode !== $container){
                parent = endnode.parentNode;
               
                if(parent === null){
                    return false;
                }
               
                if(parent.nodeType === 1 && /field/.test(parent.className)){
                    range.selectNode(parent);
                   
                    range.collapse(true);
                   
                    sel.setSingleRange(range);
                }
               
                endnode = parent;
            }
           
            sel.refresh();

            return true;
        }

it tests for an element with class 'field'.

upon more testing, it seems that the carriage returns and spaces in my jquery template might be causing the issue.

<script id="mixedFieldTemplate1" type="text/x-jquery-tmpl">
        <span unselectable="true" hidefocus="true" contenteditable="false" class="field mixed" ID="${index}-${fieldID}">
            <span contenteditable="false" fieldID="${fieldID}"><controls><strong>(</strong><span class="label" style="font-weight:;font-size:#variables.defaultFontSize.getValue()#px;text-decoration:;font-style:;">${name}</span> <a href="javascript:void(0);" class="fieldOptions" title="Options"><span class="ui-icon ui-icon-wrench ui-icon-inline"></span></a><a href="javascript:void(0);" class="deleteField" title="Delete"><span class="ui-icon ui-icon-close ui-icon-inline"></span></a><strong>)</strong></controls></span>
       
            <input type="hidden" name="${index}-${fieldID}-bold" value="#variables.inline.getBold()#" />
           
            <input type="hidden" name="${index}-${fieldID}-fontSizeID" value="#variables.defaultFontSize.getID()#" />
           
            <input type="hidden" name="${index}-${fieldID}-underline" value="#variables.inline.getUnderline()#" />
           
            <input type="hidden" name="${index}-${fieldID}-italicize" value="#variables.inline.getItalicize()#" />
           
            <input type="hidden" name="${index}-${fieldID}-transformID" value="#variables.defaultTransform.getID()#" />
           
            <input type="hidden" name="${index}-${fieldID}-isDate" value="#variables.inline.getIsDate()#" />
           
            <input type="hidden" name="${index}-${fieldID}-dateFormatID" value="#variables.defaultDateFormat.getID()#" />
        </span>
    </script>

if i put all of that template on one line w/o any spaces, it seems to work.  of course, now my template code is unreadable.

any ideas?