Cursor position in designMode IFrame

**Jas** · 08-02-2008, 03:35 AM

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.

**Jesdisciple** · 08-02-2008, 09:28 PM

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.

**Jas** · 08-03-2008, 01:40 AM

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

**mburt** · 08-03-2008, 03:55 AM

Code:

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

**Jas** · 08-03-2008, 10:24 PM

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.

**jscheuer1** · 08-04-2008, 03:15 PM

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.

**Jas** · 08-04-2008, 03:59 PM

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.

**jscheuer1** · 08-05-2008, 09:13 AM

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.

**Jas** · 08-05-2008, 06:16 PM

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.

**jscheuer1** · 08-06-2008, 04:52 AM

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.

Thread: Cursor position in designMode IFrame

Thread Tools

Search Thread

Cursor position in designMode IFrame

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

Bookmarks

Bookmarks

Posting Permissions