Cursor position (javascript)

Last post 01-06-2006, 5:49 AM by Nilzor. 7 replies.
Sort Posts: Previous Next
  •  12-16-2005, 9:51 AM 13958

    Cursor position (javascript)

    Case: I want to perform a conditional pasteHTML in the editor pane. If the cursor at the moment is inside a <TABLE> tag, I'd want to move the cursor below the nearest </TABLE> before pasting.

    To perform this I'd preferably want to know the position of the cursor relative to the HTML text -even though the user currently is working in Normal mode.

    For those intrested, I have done a workaround but it is pretty dirty and slow:
    -I insert a token using the Editor.ExecCommand('PasteHTML',false,token);
    -Then i search for the token in the editor.GetDocument().body.innerHTML.
    -I then either replace the token with the text to be pasted, or remove the token depending on the surrounding tags.

    I don't know if it's because a bug or not, but when I alter the innerHTML, the Normal view suddenly looks like the Preview view (all table borders are lost, etc), so to mend this I perform a final dummy call to PasteHTML (empty content). 
     

    I don't like my solution  - I'd like to do with only one call to PasteHTML.

    Suggestions?

     

     

     
  •  12-16-2005, 3:36 PM 13970 in reply to 13958

    Re: Cursor position (javascript)

    Nilzor,
     
    Can you explain why you can't use the editor1.PasteHTML directly?
     

    function PasteHTML(html)
       {
        // get the cute editor instance
        var editor1 = document.getElementById('<%=Editor1.ClientID%>');
        
        editor1.PasteHTML(html);
       }
       
     
    It always insert the HTML at the cursor position.
     
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  12-19-2005, 3:40 AM 14013 in reply to 13970

    Re: Cursor position (javascript)

    Yes, the case is I may want to MOVE the cursor first :) I want to prevent the user from nesting tables.
     
  •  12-23-2005, 4:11 AM 14143 in reply to 13970

    Re: Cursor position (javascript)

    Ok I'll try to explain it better - we're considering to buy your product for a project starting in January but we'd need to solve this issue in some way or other.
     
     As I said, we want to prevent the user from creating nested HTML tables. We remove the original table buttons and create our own, custom button. When the user presses this custom button, it will move the cursor outside any table it might be in at  the moment and then create a new table from a predefined template.
     
    To do this, I need to know where in the HTML the user is currently working. Example:
     
    the HTML is "<html><body>SomeText<table><tr><td>A Cell</td></tr></table></body></html>"
    In Normal view this would look something like "SomeText A Cell" with a line break after SomeText.
    Now say the cursor is before the letter 'A' in the cell. I want to call a javascript function that can return me the character offset of the "cursor" in the HTML data - in this case the number 37.
     
    -Note that all this HTML work is done by the script,
    The user will be working in NORMAL MODE! 
     
    Hope this was more clear. When that is said - we might solve this problem in several other ways, but I found it pretty neat to use tables in this case.
  •  12-29-2005, 9:37 PM 14258 in reply to 14143

    Re: Cursor position (javascript)

    Nilzor,
     
    Please try the following solution. Just modify it to fit your requirements.
     
    function InsertNewTable()
       {
        // get the cute editor instance
        var editor = document.getElementById('<%=Editor1.ClientID%>'); 
        
        //Get the editor content 
        var editdoc=editor.GetDocument();
           
        var oNewTable = editdoc.createElement("TABLE");
        var td=editor.SearchSelectionElement("TD");
        if(td==null)
        {
         //insert the table into the editor directly
         editor.InsertElement(oNewTable);     
        }
        else
        {
         var table=Table_GetTable(td);
         table.parentNode.appendChild(oNewTable);
        }
       }
       

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  01-05-2006, 10:57 AM 14464 in reply to 14258

    Re: Cursor position (javascript)

    Exactly what I was looking for, thanks a lot! :)

    Just one final thing now and I'm done: I need to add attributes to the oNewTable element object (like class="someClass"). I guess there is a function for that aswell?

    PS: I tried 'oNewTable.class = "punkt";' , but 'class' seems to be some kind of special property, so IE reported an error. Any other parameter translated successfully into a parameter in the HTML tag.
  •  01-05-2006, 3:53 PM 14468 in reply to 14464

    Re: Cursor position (javascript)

  •  01-06-2006, 5:49 AM 14485 in reply to 14468

    Re: Cursor position (javascript)

    Thanks. It works now, but I have to change to HTML view and then back to Normal view for the editor to show the new table. Seems like it needs some kind of refresh to update. Any javascript function I can call to perform this?
     
     
View as RSS news feed in XML