Track Cursor position in editor window for custom pasteHTML

Last post 09-12-2007, 8:55 AM by gthelp. 0 replies.
Sort Posts: Previous Next
  •  09-12-2007, 8:55 AM 33491

    Track Cursor position in editor window for custom pasteHTML

    I had a custom treeview control on same page as my editor so when i clicked a treenode i wanted code to insert into the editor.  However, doing so the editor would lose the cursor position and insert at beginning of document.  I noticed a number of posts that wanted some similar function but all the code samples were spread across multiple posts.  Here is what i found works for me.  Definitely can be improved.
     
    First you need to create a editor reference, a rangeobject to hold selection range, and capture certain editor events in my case.

    <script language="javascript" type="text/javascript">

    var editor1 = document.getElementById('<%=Editor1.ClientID%>');
    var rCursorRange = null;

     

    setTimeout(CE_attachEvent,1000);

    function CE_attachEvent()

    {
    var editdoc=editor1.GetDocument();
    editor1.FocusDocument();

    // attach Event - i want capture cursor position in editor on keystoke or mouseclick
    if(editdoc.attachEvent)
    {
    editdoc.attachEvent(
    'onkeyup',storeTextRange);
    editdoc.attachEvent(
    'onmouseup',storeTextRange);
    }
    else if(editdoc.addEventListener)
    {
    //my app is IE so included this for other browsers
    editdoc.addEventListener(
    'onkeyup',storeTextRange,true);
    editdoc.addEventListener(
    'onmouseup',storeTextRange,true);
    }
    }

    function CuteEditor_OnCommand(editor,command,ui,value)

    {
    //anoying bug - when switch activetabs, it drops all events linked to editor, so need reattach
    if(command=="TabEdit")
    {
    //reattach the event here
    setTimeout(CE_attachEvent,1000);
    }
    }

    function storeTextRange()
    {
    //here track the selection object into range varaible-  note that i am only interested in text ranges
    //you can handle control ranges by
    var editdoc=editor1.GetDocument();
    if (editdoc.selection.type != null)
    {
    if (editdoc.selection.type.toLowerCase() != 'control')
    { rCursorRange = editdoc.selection.createRange().duplicate(); }
    }
    }
    </script>
     
    At this point, and keyup or mouse event will save cusor insert position into rCursorRange object
    Now need javascript to insert at that point.
     

    function InsertDataField(value)

    {

    var editdoc=editor1.GetDocument();
    if (value!=null)

    {

    //make sure I insert code as HTML, not escaped value
    InsValue= value.replace(/&lt;/gi,
    '<');

    //focus on editor before can insert into global textrange

    try {

    editor1.SetActiveTab('Edit');
    editor1.FocusDocument();
    if (rCursorRange==null)
       {
    // no Cursor saved yet, so default insert at begining document and set cursor reference
    editor1.PasteHTML(InsValue +
    "&nbsp;");
    rCursorRange = editdoc.selection.createRange().duplicate();
    }
    else {
    //paste code and set cursor to end of insert
    rCursorRange.pasteHTML(InsValue +
    "&nbsp;");
    rCursorRange.collapse(
    false); // set to true if you want to move cursor to begin
    rCursorRange.select();
    }
    }
    catch(err) {alert(err.description)}
    }}
     
    the only bug I have currently with this is when insert HTML table, untill you click on editor or interact with it, it will not show the table in normal mode.
     
    Hope this helps
    Greg
View as RSS news feed in XML