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