www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Help with Rich Text Area

  1. #1
    Join Date
    Sep 2010
    Posts
    3

    resolved [RESOLVED] Help with Rich Text Area

    Hi all,

    I'm struggling with a script I'm developing. The purpose is to create a rich text area and I need to pass the data from the iFrame in real time to the hidden TextArea. I know, there are a lot of scripts out there that do the same, but I want to learn and understand how to do this.

    So what do I want; I have an addEventListener event that needs to pass the changes to the textarea. In the KeyBoardHandler part I want the function PushText to pass the changes to the textarea, but I need to get the element ID to do that. How do I get the element ID that I need in PushText to the KeyBoardHandler function?

    I hope this makes sense to y'all.

    Here's the code, and thanks in advance!:

    Code:
    /* Create RichTextArea */
    
    function RichTextArea(idname, html, width, height, leftmargin, topmargin)
    {
    	this.idname = idname;
    	this.html = html||"";
    	this.width = width;
    	this.height = height;
    	this.leftmargin = leftmargin;
    	this.topmargin = topmargin;
    
    	document.writeln('<iframe id="'+this.idname+'" style="width:' + this.width + 'px; height:' + this.height + 'px; margin-left:' + this.leftmargin + 'px" class="textarea"></iframe>');
    	var Editor = document.getElementById(this.idname).contentWindow.document;
    	Editor.designMode = "on";
    
    	var frameHtml = "<html>\n";
    	frameHtml += "<head>\n";
    	frameHtml += "<style type=\"text/css\">body { font-family: calibri, \"Trebuchet MS\", Helvetica, sans-serif;font-size:12px; } </style>\n";
    	frameHtml += "</head>\n";
    	frameHtml += "<body>\n";
    	frameHtml += this.html;
    	frameHtml += "</body>\n";
    	frameHtml += "</html>";
    
    	Editor.open();
    	Editor.write(frameHtml);
    	Editor.close();	
    	
    	Editor.addEventListener("keypress", KeyBoardHandler, true);
    
    	document.writeln('<textarea id="hdn'+this.idname+'" name="' + this.idname + '" style="display:block;">'+this.html+'</textarea>');
    
    }
    
    /* Keyboard event handler */
    
    function KeyBoardHandler(Event, keyEventArgs) {
    	if (Event.keyCode == 13) {
    		Event.target.ownerDocument.execCommand("inserthtml",false,'<br />');
    		Event.returnValue = false;
    	}
    
    	if (Event.ctrlKey) {
    		var key = String.fromCharCode(Event.charCode).toLowerCase();
    		var cmd = '';
    		switch (key) {
    			case 'b': cmd = "bold"; break;
    			case 'i': cmd = "italic"; break;
    			case 'u': cmd = "underline"; break;
    		};
    
    		if (cmd) {
    			Event.target.ownerDocument.execCommand(cmd,false,true);
    			Event.preventDefault();
    			Event.stopPropagation();
    		}
     	}
    }
    
    /* Push text from iFrame to TextArea function */
    
    function PushText(idname)
    {
    	this.idname = idname;
    	var Editor = document.getElementById(this.idname).contentWindow.document;
    	var text = document.getElementById('hdn'+this.idname);	
    	text.value = Editor.body.innerHTML;
    }
    
    /* Button format function */
    
    function Format(action, idname)
    {
    	this.idname = idname;
    	var Editor = document.getElementById(this.idname).contentWindow.document;
    	Editor.execCommand(action, false, null);
    
    	PushText(this.idname);
    }

  2. #2
    Join Date
    Sep 2010
    Posts
    3
    Oh yeah, and I also need to get this to work with Internet Explorer, that doesn't seem to work either.

  3. #3
    Join Date
    Sep 2010
    Posts
    3
    One step further in the process. The trick to get the elementID was Event.target.id. Changed the KeyBoardHandler function to the one below. Now it works partially. When writing text it seems that every keystroke is one behind. This drives me nuts!

    Sorry for the somewhat crappy English by the way, it's not my native tongue.

    Code:
    /* Keyboard event handler */
    
    function KeyBoardHandler(Event, keyEventArgs) {
    
    	var idname = Event.target.id;
    
    	if (Event.keyCode == 13) {
    		Event.target.ownerDocument.execCommand("inserthtml",false,'<br />');
    		Event.returnValue = false;
    	}
    
    	if (Event.ctrlKey) {
    		var key = String.fromCharCode(Event.charCode).toLowerCase();
    		var cmd = '';
    		switch (key) {
    			case 'b': cmd = "bold"; break;
    			case 'i': cmd = "italic"; break;
    			case 'u': cmd = "underline"; break;
    		};
    
    		if (cmd) {
    			Event.target.ownerDocument.execCommand(cmd,false,true);
    			Event.preventDefault();
    			Event.stopPropagation();
    		}
     	}
    	PushText(idname);
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles