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);
}
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);
}
[RESOLVED] Help with Rich Text Area
Reply With Quote
Bookmarks