Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Cursor position in designMode IFrame

  1. #1
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default Cursor position in designMode IFrame

    I am making an RTE with JavaScript, and I was wondering how you go about capturing the curser position in an IFrame that's in design mode. I venture to guess that it's not as easy to get as it is in a textarea, but I have no idea.

    The reason I need the cursor position is that 1) I plan to use javascript to insert things into the IFrame, and 2) I need to be able to place the cursor in different places in the IFrame.

    Let me know if you need more information.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  2. #2
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    What's an RTE?

    You're talking about a WYSIWYG, right? The only thing I know to suggest is that you look through an existing solution, e.g. OpenWYSIWYG. Oddly enough, that uses both a textarea and an iframe.
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  3. #3
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    RTE = Rich Text Editor. Basically a WYSIWYG editor.

    Most use both, because you can't submit the information without a form field.

    I'll look into it
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  4. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Code:
    document.onmousemove = function(e) {
      var ev = e || event;
      document["title"] = ev["clientX"]+","+ev["clientY"];
    };
    - Mike

  5. #5
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    Thanks, but I was really talking about the insert point in the iframe, aka the caret. I need to be able to inset text at the insertion point. I still haven't had time to look into the WYSIWYG editor, but I will soon, I hope.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,028
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    There is no insert point in an iframe. You need a textarea or a text input on the page in the iframe. Now, I assume you are familiar with accessing elements in the iframe from the parent page (if that's part of the process). This function (I forget were I saw it, it's not mine but it works):

    Code:
    function setCursorPosition(oInput,oStart,oEnd) {
       	       if( oInput.setSelectionRange ) {
        	         oInput.setSelectionRange(oStart,oEnd);
                 } 
                 else if( oInput.createTextRange ) {
                    var range = oInput.createTextRange();
                    range.collapse(true);
                    range.moveEnd('character',oEnd);
                    range.moveStart('character',oStart);
                    range.select();
                 }
           }
    will allow you to set the cursor position within an element that can receive text input. It is designed to select a range, but if start and end are the same, it will simply move the cursor to that point. An alternative to getting the element in the iframe from the parent would be to put the above on the page in the iframe and hard code the element into it, then just call the function from the parent with the desired coordinates.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Jas (08-05-2008)

  8. #7
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    Thanks, John, but I am really lost. Here is the code that I have so far:

    Code:
    function start_JEMpad(){
     	//JEMPAD is the id of a textarea
    	document.getElementById("JEMPAD").style.display = "none";
    
    	var pad = document.createElement("IFRAME");
    	pad.name = pad.id = "JEMp";
    	
    	if(pad.addEventListener){
    		pad.addEventListener("load",function(e){this.contentWindow.document.designMode = "on";}, false);
    	}else if(pad.attachEvent){
    		pad.attachEvent("load", function(e){this.contentWindow.document.designMode = "on";});
    	}
    	
    	document.body.insertBefore(pad, document.getElementById("JEMPAD"));
    	
    	JEMp.document.designMode = "on";
    	JEMp.document.open();
    		JEMp.document.write('<html>\n\t<head>\n\t\t<style type="text/css">\n\t\t\tbody{ font-family:arial; font-size:13px; }\n\t\t</style>');
    		JEMp.document.write('\n\t</head>\n\t<body>\n\t</body>\n</html>');
    		//I tried adding JS functions in here too, but they don't seem to work since the IFrame in in design mode
    	JEMp.document.close();
    	JEMp.focus();
    	
    	JEMp.document.body.innerHTML = formattext(document.getElementById("JEMPAD").innerHTML);
    	
    	try{
    		JEMp.document.body.attachEvent("onkeyup", update_pad, false); //triggers error in FF unless I use try/catch
    	}catch(e){
    		JEMp.addEventListener("keyup", update_pad, false);
    	}
    }
    
    function setCursorPosition(oInput,oStart,oEnd) {
       	       if( oInput.setSelectionRange ) {
        	         oInput.setSelectionRange(oStart,oEnd);
                 } 
                 else if( oInput.createTextRange ) {
                    var range = oInput.createTextRange();
                    range.collapse(true);
                    range.moveEnd('character',oEnd);
                    range.moveStart('character',oStart);
                    range.select();
                 }
           }
    
    function update_pad(){
    	JEMp.document.body.innerHTML = formattext(JEMp.document.body.innerHTML); //PUSHES CURSOR TO END OF IFRAME
    
    	//How do I capture the cursor's previous position and put it back? (obviously the capture would need to be before the previous line)
    	setCursorPosition(document.getElementById("JEMp"),1,1); // I obviously need to use this, but it's not working
    }
    
    function formattext(string){
    	return string;
    }
    
    function decompiletext(string){
    	return string;
    }
    
    function addtag(tag1, tag2){		
    	//How do I do this?
    }
    Two questions on the above: 1) how do I capture the caret position and put it back after I format the IFrame, 2) how do I insert text at the insertion point? (i.e. the user highlights "Hello" and clicks bold, so the text becomes "[b]Hello[/b]". This would then be processed by the formattext() function and become XHTML-- I already have that part done.)

    Any help/suggestions would be amazing. I know it's asking a lot.
    Last edited by Jas; 08-04-2008 at 04:06 PM.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,028
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    I don't think this will work:

    Code:
    pad.attachEvent("load", function(e){this.contentWindow.document.designMode = "on";});
    because this refers to the top window in an attachEvent function. The use of (e) for that function is meaningless, as it isn't used in the function and because when a browser (usually only IE) uses attachEvent, it doesn't pass events that way, it uses the window.event model. With addEventListener the (e) will represent the event, but you still aren't using it in that function, so don't need it. The good news is that this will refer to the pad element in that case (FF, most others except IE). Unfortunately, document.designMode does not (as far as I can tell) work in anything other than IE, so I'm surprised that any of the rest of the code works at all in any browsers. See:

    http://www.mozilla.org/editor/ie2midas.html

    I will glance over the rest of the code, but as I've just pointed out, any of it that depends upon designMode in the iframe will probably fail with that initialization setup. However, later where you do:

    Code:
    JEMp.document.designMode = "on";
    That should do the trick in IE (only). But since I see nowhere in your code that the function start_JEMpad() is ever run, once again, I don't see anything happening. Perhaps it is run, you just haven't shown that part, or something other than document.designMode is at work here, either could explain why you may have some positive results in one or more browsers.

    If you do have this working at all, give me a link to the live page.

    In any case, it would be best to get rid of any parts of the code that aren't really doing anything, it makes it so much easier to debug the parts that are.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    I am very sorry! I should have added the HTML page:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <title>JEMpad Version 1.0 TEST</title>
    
        <!-- This is the javascript shown in my last post //-->
        <script type="text/javascript" src="./jempad.js"></script>
        
    </head>
    <body onload="start_JEMpad()">
    
    	<button onclick="addtag('b','b')">B</button>
    	<textarea id="JEMPAD">[b]Some initial text that's going to be bold[/b]</textarea>
    
    </body>
        </html>
    I see your points, John, and I will try to clean that up; but, the script actually does work in both IE and FF so far. I haven't tried any other browsers yet, because my client will really only need those two for now. There is no live page, but you should be able to get it working from the code in this and the last post, unless I made some typos.

    Thank you so much for sticking with this thread. I know this isn't the easiest question in the world, so I really do appreciate the help.
    Last edited by Jas; 08-05-2008 at 06:29 PM.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,028
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    The setCursorPosition doesn't appear to work with the iframe in FF. It does work in IE with the iframe. As I mentioned before though, it is intended for textarea or text input.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •