February 1, 2007 by Christoff Truter JavaScript
Creating a WYSIWYG textbox for your website is actually quite simple.
Thanks to the html iframe component that contains the execCommand
function, which enables us to access html tags in real time.
The following snippets shows how to implement this function:
editor.js
var Editor; function Format(action) { Editor.execCommand(action, false, null); } function Colour(colour) { Editor.execCommand("forecolor",false, colour); } window.onload = function() { Editor = document.getElementById('textbox').contentWindow.document; Editor.designMode = "on"; document.forms[0].onsubmit = function() { var text = document.getElementById('text'); text.value = Editor.body.innerHTML; } }
<html> <head> <title>Simple Javascript WYSIWYG Editor</title> <script language="Javascript" src="editor.js"></script> </head> <body> <form method="POST"> <div> <input type="button" onclick="Colour('Green')" style="background-color:Green;" /> <input type="button" onclick="Colour('Red')" style="background-color:Red;" /> <input type="button" onclick="Colour('Blue')" style="background-color:Blue;" /> <input type="button" onclick="Colour('Black')" style="background-color:Black;" /> <input type="button" onclick="Format('bold')" value="B" /> <input type="button" onclick="Format('italic')" value="I" /> <input type="button" onclick="Format('Underline')" value="U" /> <input type="button" onclick="Format('justifycenter')" value="C" /> <input type="button" onclick="Format('justifyleft')" value="L" /> <input type="button" onclick="Format('justifyright')" value="R" /><br/> <iframe id="textbox" style="width:300px; height:150px"></iframe><br/> <input type="submit" value="Go" /> <input type="hidden" id="text" name="text" /> </div> </form> </body> </html>This is just a basic implementation of the execCommand function, here is a small list of properties one can use as well, things like cut/paste inserting tables/links/images etc:
Change Link Text August 14, 2008 by Luke
Hello, Thank you for this great script! It's really amazing. Is it possible to change the link text, so that it can say something like "Click Here" rather than printing out the entire URL?