After we have explored how to create a rich text editor,
it is time to add some new features which will extend its usability and
benefits. In this article we will get to know how new features were
implemented. Again, all the major functionalities are written in javascript.
In the previous article you saw how easy it was to create
your own text editor. Of course, as a first version the editor contained
standard features. Now, after I had sometime to add new functionalities, I can
say it contains more features and it is more robust.
Below are the newly added features.
1.
Strike Through: This will strike through the text entered by the user.
2.
Decrease-Increase Indent: This will decrease or increase the text
indent.
3.
Insert Images: This will open a new window giving the user the ability
to upload an image to the server and insert it directly into
the editor.
4.
Copy, Cut, and Paste: This will copy, cut or paste the text entered by
the user into the clipboard.
5.
Print: It allows only the text to be printed by opening the Print Setup
dialog.
6.
Bulleted List & Numbered List: It adds a bullet or number at the
beginning of the text.
7.
Super-Sub script: It will format the text into super script or sub
script.
8.
Insert Lines: It adds lines to the text.
Add HTML code to the user control
In this section we will add new HTML elements to add more
features into the toolbar. We will place images for all the above mentioned
actions and handle all the events to perform their functionalities.
Listing 1
<IMG class=StrikeOut id=Strikethrough
onmouseover="ChangeImg('Strikethrough','strikethrough.over.gif')"
title="Strike Through" onclick="Formats('StrikeThrough','<%= this.HamEditorChildID %>' )"
onmouseout="ReturnImg('Strikethrough','strikethrough.gif',imgStatusUnderLine)"
src="Images/strikethrough.gif" >
In the above listing we added an img HTML control. The
onmouseover event will call a javascript function (which I already explained in
the previous article), will change the image to a selected one, the onclick
event will call another function which will apply the formatting into the
selected text, and onmouseout will return the image to its previous state. For
the rest of the features we will use the same concept except for the Insert
Images.
Please download the project to see exactly how we created
all the HTML tags.
Figure 1