CSTrüter HomeArticlesDownloadsAbout meContact me
How to enable the filestream feature in SQL 2008 - Alternative way to store blobs(files) via SQL 2010-08-21 19:31:56
How to create a Singleton Pattern in C# 2010-08-10 22:52:52
How to prevent that threads access shared resources concurrently via Monitor. 2010-08-06 15:31:15
A quick review of the book PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide written by Larry Ullman 2010-08-04 21:48:58
How to prevent that threads access shared resources concurrently via Mutex. 2010-08-03 14:42:36
How to stop propagation of javascript events 2010-07-25 21:59:29
Post about how Pete the web developer fixed his sitemap 2010-07-17 15:12:02
How to setup an out of process session service 2010-07-08 17:51:46
How to display/add images from/to a SQL Database 2010-07-04 23:15:15
How to register a custom URL protocol handler 2010-06-28 20:34:01
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
Populate a TreeView control in a windows application. 2009-08-27 16:01:03
2007-02-22 12:00:00
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>
Hi,how do u insert tables using the execcommand
Editor.body.innerHTML = 'default text';
Hi Christoff. But in Word 2007 it's very easy to change it in Paragraph properties. By the way Opera have the same issue, but it's fine in Firefox and Chrome. Christoff, I'll be very glad for any help or advices about this. I had noticed "Shift+Enter", but I can't tell to everybody to press "Shift+Enter" for normal "Enter". If I'll find the solution I will post it here.
Hi Max, you'll notice the same issue with word processors like Word 2007 for example. If you hold in shift and press enter, you'll notice you'll only get one line space - I suspect its Microsoft behaviour since I didnt notice the issue in Openoffice & Firefox. I will investigate to get you a more natural solution.
marginwidth="1" marginheight="1" Will make border spaces like in textarea scrolling="yes" Will give scrollbar like in textarea How to fix big spaces after "Enter" pressing?
It's awesome, but why so big space between lines? How can I make it the same as in textarea. Why so big space from text to border? How can I customize this properties?
How can i add one more button, like paragraph, for exemple?? Wich lines must i change?
holy shit... fairly simpe, i though im never gona find perfect editor, and its too complicated to make it myself... but noo, than you jesus
If you want to set default text, just add src="text.htm" to the iframe code and create a page called "text.htm" and enter your default text into that page. Not tested this much, but it seems to work
That's great! thanks!
1 2 3 4 Last / 4 Pages (34 Entries)
The company I am currently working for as software developer.
Collection of C# snippets 2010-05-22 01:06:19
Collection of MS SQL snippets 2010-05-22 00:55:15
Collection of JavaScript snippets 2010-05-22 00:37:57
Collection of ASP.net snippets 2010-05-22 00:29:56
Collection of PHP snippets 2010-05-22 00:06:45
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