Many individuals have asked in ASP.Net forums how to create a component similar to RichTextBox (RichTextBox.com). It actually is quite simple. Almost all WYSIWYG (What You See Is What You Get) components similar to the RichTextBox control will only work in Internet Explorer 4.0 and higher. This article will show two examples of the WYSIWYG component. First, I will demonstrate how to create your own component. Secondly, I will show how to implement my TextEditor lightweight control into your web application.
Microsoft decided that with the implementation of Internet Explorer 4.0, they were going to build in more functionality. This includes enhanced styles on objects (such as filters), page transitions, and editable properties. The editable properties feature is the one that we are going to be most concerned with. Microsoft has released at least three (3) articles about creating editable properties. This demonstration will try to sum those articles up into one.
(1)
First, we must choose a web editor. For purposes of this demonstration, notepad or the Web Matrix would be fine. You can download the Web Matrix at http://www.asp.net/webmatrix/. We must then open up the editor and create a new page. We will start out with the basic tags and add a <div> tag as shown below:
1: <html>
2:
3: <head>
4: <title>WYSIWYG Example</title>
5: </head>
6:
7: <body>
8:
9: <div id="myDocument"></div>
10:
11: </body>
12:
13: </html>
<div id="myDocument" contentEditable="true"></div>
The box alone allows the user to use basic shortcuts to get their desired format. The shortcuts are:
| Cut (Ctrl + X) | Copy (Ctrl + C) | Paste (Ctrl + V) | | Bold (Ctrl + B) | Italic (Ctrl + I) | Underline (Ctrl + U) | | Undo (Ctrl + Z) | Redo (Ctrl + Y) | Hyperlink (Ctrl + K) | | Find (Ctrl + F) | Select All (Ctrl + A) | Select Block (Ctrl + Left-click) |
In Internet Explorer 5.5, new features were added including vertical text editing, format preservation during cut/copy/paste, and format preservation on empty lines. Now that the <div> tag has the contentEditable property set, we can now create buttons or a toolbar to help the users obtain the look they desire even if they do not know the keyboard shortcuts. We will start out by adding three (3) buttons to our page. We will also set another property called unselectable to on. This will prevent users from selecting the "control". Your code should look similar to this:
1: <html>
2:
3: <head>
4: <title>WYSIWYG Example</title>
5: </head>
6:
7: <body>
8:
9: <button unselectable="on"><b>Bold</b></button>
10: <button unselectable="on"><i>Italic</i></button>
11: <button unselectable="on"><u>Underline</u></button> <br>
12: <div id="myDocument" unselectable="on" contentEditable="true"></div>
13:
14: </body>
15:
16: </html>
onClick='document.execCommand("Bold");myDocument.focus();'
The composite source code and the small component are shown below:
1: <html>
2:
3: <head>
4: <title>WYSIWYG Example</title>
5: </head>
6:
7: <body>
8:
9: <button unselectable="on" onClick='document.execCommand("Bold");
myDocument.focus();'><b>Bold</b></button>
10: <button unselectable="on" onClick='document.execCommand("Italic");
myDocument.focus();'><i>Italic</i></button>
11: <button unselectable="on" onClick='document.execCommand("Underline");
myDocument.focus();'><u>Underline</u></button> <br>
12: <div id="myDocument" unselectable="on" contentEditable="true"></div>
13:
14: </body>
15:
16: </html>
Other execCommand commands include (but are not limited to):
| 2D-Position | AbsolutePosition | BackColor | | BlockDirLTR | BlockDirRTL | Bold | | BrowseMode | Copy | CreateBookmark | | CreateLink | Cut | Delete | | DirLTR | DirRTL | EditMode | | FontName | FontSize | ForeColor | | FormatBlock | Indent | InlineDirLTR | | InlineDirRTL | InsertButton | InsertFieldSet | | InsertHorizontalRule | InsertIFrame | InsertImage | | InsertInputButton | InsertCheckbox | InsertInputFileUpload | | InsertInputHidden | InsertInputImage | InsertInputPassword | | InsertInputRadio | InsertInputReset | InsertInputSubmit | | InsertInputText | InsertMarquee | InsertOrderedList | | InsertParagraph | InsertSelectDropdown | InsertSelectListbox | | InsertTextArea | InsertUnorderedList | Italic | | JustifyCenter | JustifyFull | JustifyNone | | JustifyRight | LiveResize | MultipleSelection | | Open | Outdent | OverWrite | | Paste | PlayImage | Print | | Redo | Refresh | RemoveFormat | | RemoveParaFormat | SaveAs | SelectAll | | SizeToControl | SizeToControlHeight | SizeToControlWidth | | Stop | StopImage | StrikeThrough | | Subscript | Superscript | UnBookmark | | Underline | Undo | Unlink | | Unselect | | |
Now that you have learned the basics with creating editable pages, let's move onto the implementation of my web service application. [Part 2]
[My Column]
[Printer-Friendly]
|