iframe componenet in javascript can provide a rich text editing and a html page can be easily embeeded inside iframe as it is just like frames.
<iframe id="edior" width="300" height="200 style="border:0px solid grey"></iframe>
To remove the border both in IE and firefox you can set the style to 0px.
You can also load the iframe dynamically with javascript
document.write("<iframe id=\"rte\" width=\"" + width + "\" height=\"" + height + "\" style=\"border:1px solid grey\"></iframe>");
But what if you want to send a value from iframe to a textbox in a form through POST. The idea is along with iframe include a hidden input box and get the iframe innerHTML value assigned to hidden input when the form is submitted. iFrames innerHTML will return the html source to the hidden textbox value
window.onload = function()
{
myeditor = document.getElementById('rte').contentWindow.document;
myeditor.designMode = "on";
}
function doSubmit(txtbox) {
document.getElementById('hiddenbox').value = myeditor.body.innerHTML;
}
The html page is below.
<form action="" method="post" onSubmit="doSubmit();"> <input type="hidden" id="hiddenbox" name="hiddenbox"> </form>
Similar Posts:
- iframe innerHTML value from textarea
- Free Markup TextArea HTML Editor in Javascript
- A Simple WYSIWYG Editor in Javascript
- Changing Default Font in TinyMCE Editor
- Best Free Web based WYSIWYG html editors
- Lightweight PHP WYSIWYG HTML Editor
- iFrame in javascript wont work in Firefox [solved]
- Free Markup BBCode Editor in Javascript
- Free BBCode/HTML Markup Editors!
- how to call a php script from javascript?


February 18, 2010
Interesting Idea!
Thank you for this sharing. Very nice.
August 2, 2010
Great post
In the script element the type attribute has a value “text/javascript” and it represents what?