CSTrüter HomeArticlesDownloadsAbout meContact me
a quick look at how to create a windows service using C# 2010-02-28 21:48:06
How to call server-side code from client-side code, using PageMethods in ASP.net 2010-02-21 12:31:27
How to pass a set of data to an xml type in SQL 2005/8 2010-02-12 19:04:23
Some funky behaviour regarding overload Resolution of dynamic/object types 2010-02-09 17:16:52
Object orientated programming within JavaScript 2010-01-28 07:25:45
How to sort data using ASP.net (C#) and SQL 2005/8 2010-01-18 15:23:14
Quick look at some of the new features added to C# 4.0 2010-01-12 21:52:13
SQL 2008 introduced a nifty feature called Table-Valued Parameters (TVP) into its codebase 2010-01-06 22:58:25
How to page data using ASP.net (C#) and SQL 2005/8 2009-10-19 15:01:45
a post about sql joins 2009-09-20 15:50:57
Creating a WYSIWYG textbox for your website is actually quite simple. 2007-02-01 12:00:00
Move items between two listboxes in ASP.net(C#, VB.NET) and PHP 2008-06-12 17:07:43
Firefox word wrapping issues 2008-06-09 09:51:21
2007-02-22 12:00:00
Blog about passing parameters by reference to functions using func_get_arg(s) 2008-07-27 12:38:24
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; } } In the top script we attach anonymous methods to the page load event and one on the form submit event (assigns the contents of the iframe to a form control - since we need to submit it via the page) editor.html <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: BackColor: Get or set the background color of the selected region. (this property shows some weird behavior in Firefox 2.0) Copy: Copies the selected region to the clipboard. Cut: Removes the selected region from the document. Paste: Adds data from clipboard to region (if applicable). InsertHorizontalRule: Adds a horizontal rule to the region. InsertImage: Displays an IE defined modal dialog that contains full image selection features, alt tag modification, border setting, etc. InsertMarquee: Converts the selected text into a marque. InsertSelectDropDown: Adds a drop down list to the region. Print: Displays the windows print dialog so that the region can be printed. Refresh: Refreshes the region. CreateLink: Displays an IE defined modal dialog that lets you add a hyperlink using either selected text or new text. InsertUnorderedList: Toggles between the selected text being an unordered list and normal text.
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>
How to make it able to deal with multiple forms on one screen? If somebody have the answer, send me an mail holsteinkaa /-\ gmail.com
Hej,. How do I load data inside the iframe from a variable in php. thanks Troels
Hi - is there anyway to add 'maxlength' to the iframe to restrict the number of characters entered?
Thanks. So many of the web ones are so complicated you can't make changes without spending hours figuring out what's going on. This is great.
hello, does anyone know how to write a function for the image? I mean, insert image func. Thanks!
I passed the edited content to a database, but when I want display it and edit it with the editor again it is impossible as the text type is "hidden". Any suggestions?
Hehe, ahhh, it was too simple for me! You just have to type the text, then highlight it and insert the URL. Thanks again for the script!
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?
Nice thanks for the script. I incorporated this on my newsletter apps.
This is incredibly creative, i'd never heard of using an iframe and pulling the text out to a hidden var, simply brilliant! Props to you! --FF
1 2 3 4
Codebooth my semi-community site etc (work in progress)
The company I'am currently working for as software developer.
a Parallel reference of programming languages 2009-09-10 12:48:23
a tutorial explaining how to develop a simple login using PHP and MySQL 2009-09-05 18:26:47
An article looking at adding some kind of event driven model to PHP 5 2008-07-28 12:48:09
It is very simple creating your own rss reader, the following article looks at a few methods of doing this. 2008-06-23 13:18:25
A quick reference about working with dropdown boxes (select element) in javascript. 2007-02-17 16:36:41
Collection of funny programming articles 2006-10-08 14:23:43