Free Javascript iFrame Div Textarea Editor

by
Ok so you have probably been searching everywhere for a free basic textarea editor that you can view both the html and the text. Well if you read the title of this blog, it says iframe, div, and textarea editor but the only thing you really need is the iFrame. To get straight to the point, bolow is a sample of what the code will output.

var isHTMLMode = false document.onreadystatechange = function() { idContent.document.designMode = “On”; } //this code checks whether or not to use innerText or textContent for IE or Firefox, respectively. var hasInnerText; if(document.all){ hasInnerText = 2; } else{ hasInnerText = 1; } function setMode(bMode) { var sTmp; isHTMLMode = bMode; if (isHTMLMode) { if(hasInnerText == 1){ sTmp = idContent.document.body.innerHTML; idContent.document.body.textContent = sTmp; } else { sTmp = idContent.document.body.innerHTML; idContent.document.body.innerText = sTmp; } document.getElementById(“editor-icons”).style.display = “none”; } else { if(hasInnerText == 1){ sTmp = idContent.document.body.textContent; idContent.document.body.innerHTML = sTmp; } else { sTmp = idContent.document.body.innerText; idContent.document.body.innerHTML = sTmp; } document.getElementById(“editor-icons”).style.display = “block”; } idContent.focus(); } function cmdExec(cmd,opt) { if (isHTMLMode) { alert(“Please uncheck ‘Edit HTML'”); return; } idContent.document.execCommand(cmd,””,opt); idContent.focus(); }
BoldItalicUnderlineJustify LeftJustify CenterJustify Right

Edit HTML?


So now you want me to give you the code in full and you want the code to work right away. Well here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Script Editor</title>

var isHTMLMode = false

document.onreadystatechange = function() {
idContent.document.designMode = “On”;
}

//this code checks whether or not to use innerText or textContent for IE or Firefox, respectively.
var hasInnerText;
if(document.all){
hasInnerText = 2;
} else{
hasInnerText = 1;
}

 

function setMode(bMode) {
var sTmp;
isHTMLMode = bMode;
if (isHTMLMode) {
if(hasInnerText == 1){
sTmp = idContent.document.body.innerHTML;
idContent.document.body.textContent = sTmp;
} else {
sTmp = idContent.document.body.innerHTML;
idContent.document.body.innerText = sTmp;
}
document.getElementById(“editor-icons”).style.display = “none”;
} else {
if(hasInnerText == 1){
sTmp = idContent.document.body.textContent;
idContent.document.body.innerHTML = sTmp;
} else {
sTmp = idContent.document.body.innerText;
idContent.document.body.innerHTML = sTmp;
}
document.getElementById(“editor-icons”).style.display = “block”;
}
idContent.focus();
}

function cmdExec(cmd,opt) {
if (isHTMLMode) {
alert(“Please uncheck ‘Edit HTML'”);
return;
}
idContent.document.execCommand(cmd,””,opt);
idContent.focus();
}


</head>
<body onLoad="Javascript:idContent.document.designMode = ‘On’;">



BoldItalicUnderlineJustify LeftJustify CenterJustify Right

<br />
Edit HTML? <input type="checkbox" onclick="setMode(this.checked);">
</div>
</body>
</html>



Well if you look at the code it is pretty much straight forward from there. The only thing that you really need to know is that if you want to add buttons to this script then you need to understand the cmdExec() function. More specifically, you need to know the command identifiers for the function and they can be found at:
http://msdn.microsoft.com/en-us/library/ms533049(VS.85).aspx
I may update this in the future or I may not. I haven’t decided yet. But I would like it if you could tell me if this helps you out or not by leaving a comment below. Also, if this code was what you were looking for, could you tell me if it took you a long time to find this page and if so, what keywords did you use that did not find this page? Thanks and enjoy!!!

Old Link: http://spadyville.com/free-javascript-iframe-div-textarea-editor-blog

Leave a Comment