A Simple WYSIWYG Editor in Javascript
I have been always under the impression that making a html based WYSIWYG editor is hard and required complex code. Being myself a beginner in javascript i just cannot believe that how simple it is to make a rich text html editor with WYSIWYG environment.
With just few lines of simple code you can make yourself a simple rich text editor with javascript. All you need is to put iframe in the page which does most of the html processing work. Make sure you setup iframe in the design mode
document.getElementById("rte").contentWindow.document.designMode = "On";
and for it to work in firefox it must be called with getElementbyID from body onload() else it wont work in the firefox browser. Refer to the mozilla firefox documentation for more information.
Javascript Code
function Init() {
document.getElementById("rte").contentWindow.document.designMode = "On";
}
function doBold() {
document.getElementById("rte").contentWindow.document.execCommand('bold', false, null);
}
function doItalic() {
document.getElementById("rte").contentWindow.document.execCommand('italic', false, null);
}
function doURL() {
var mylink = prompt("Enter a URL:", "http://");
if ((mylink != null) && (mylink != "")) {
document.getElementById('rte').contentWindow.document.execCommand("CreateLink",false,mylink);
}
}
function doImage() {
myimg = prompt('Enter Image URL:', 'http://');
document.getElementById('rte').contentWindow.document.execCommand('InsertImage', false, myimg);
}
HTML code
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Init() {
document.getElementById("rte").contentWindow.document.designMode = "On";
}
function doBold() {
document.getElementById("rte").contentWindow.document.execCommand('bold', false, null);
}
function doItalic() {
document.getElementById("rte").contentWindow.document.execCommand('italic', false, null);
}
function doURL() {
var mylink = prompt("Enter a URL:", "http://");
if ((mylink != null) && (mylink != "")) {
document.getElementById('rte').contentWindow.document.execCommand("CreateLink",false,mylink);
}
}
function doImage() {
myimg = prompt('Enter Image URL:', 'http://');
document.getElementById('rte').contentWindow.document.execCommand('InsertImage', false, myimg);
}
</script>
</head>
<body onLoad="Init();">
<input type="submit" name="btnBold" value="bold" on id="btnBold" onClick="doBold();">
<input type="submit" name="btnItalic" id="btnItalic" value="italic" onClick="doItalic();">
<input type="submit" name="btnURL" id="btnURL" value="URL" onClick="doURL();">
<input type="submit" name="btnImg" id="btnImg" value="Image" onClick="doImage();">
<br>
<iframe id="rte">
</iframe>
</body>
</html>
Similar Posts:
- Create selected text to hyperlink in Javascript
- iFrame in javascript wont work in Firefox [solved]
- iframe innerHTML value from textarea
- how to get selected textarea value using javascript
- how to change div content in javascript?
- Free HTML Markup Editor
- Lightweight PHP WYSIWYG HTML Editor
- how to hide textarea?
- Facebook like button not working!
- Free Markup BBCode Editor in Javascript
April 8, 2010
after searching for 10-15 days i found … here a best soln.
June 7, 2010
Thanks a lottttttttttttttt…………………i was searching this thing for many days…………………………….
October 19, 2010
Sure would love to see a demo page for this WYSIWYG javascript editor.
November 15, 2010
Cool and simple, just what I was looking for.
But how can you retrieve the text/html code from the iframe to post it to the server?
December 11, 2010
shit, I can’t believe this code would work:
document.getElementById(“the_iframe’s_id”).contentWindow.document.designMode = “On”;
July 23, 2011
to get the content of the iframe, use a hidden form element and run onsubmit
function onSubmit() {
var iFrameHTML=document.getElementById(‘rte’).contentWindow.document.body.innerHTML;
document.getElementById(‘iframe_input’).value = iFrameHTML;
}
then have