Rich Text Editor - Part II
page 1 of 4
Published: 27 Feb 2007
Abstract
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.
by Haissam Abdul Malak
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 73087/ 109

Introduction

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

 

 


View Entire Article

User Comments

Title: add more function with html editor   
Name: sahir saiyed
Date: 10/19/2010 2:33:52 AM
Comment:
thank for this tutorial i want to add language converter with html editor like english to hindi converter as drop down menu
please help me
Title: template feaure in the editor   
Name: SVK
Date: 8/13/2010 7:32:23 AM
Comment:
this is a good editor which can be easily implemented in asp.net web application, but iculd we add a additional feature where by user can create a template & save it and insert it when needed
Title: VB equivalent   
Name: Etcitty
Date: 3/19/2010 3:41:48 PM
Comment:
((hamHtmlEditor)this.FindControl("HamHtmlEditor1")).FilePath = imagePath;

What is the VB equivalent of this code. Going in circles. Otherwise this soars.....
Title: please help me ...   
Name: deepak sharma
Date: 12/23/2009 1:16:56 AM
Comment:
i want to set some default text on page load please tell me how can i do with this rich text box..please.
Title: abt rich text box   
Name: deepak
Date: 12/21/2009 2:05:00 AM
Comment:
hello sir will u tell me how can i get text value in code behind..
Title: Improved Editor   
Name: Thomas
Date: 3/31/2009 6:31:32 PM
Comment:
This is very nice, but if you like a updated version go to:
http://www.codeproject.com/KB/scripting/editor.aspx
Title: using   
Name: dhirendra
Date: 3/26/2009 6:22:18 AM
Comment:
hello sir i face a problem i can get .dll(in bin folder) file of richtexteditor .plz givw me solution soon
Title: using   
Name: janardhan
Date: 2/25/2009 1:53:03 AM
Comment:
i have facing problem to utilise this editor in c#.net inline code
Title: Jazakumullah hu kairan kasira   
Name: Muhammed ismail
Date: 1/7/2009 4:26:38 AM
Comment:
Haissam Abdul Malak! Excellent work, May the Alimighty reward you with best on the doom. Your work has really solved my major issue in a project.

Warm regards and Duaa
Title: Freetutes   
Name: Ali Abbas
Date: 12/30/2008 1:07:42 AM
Comment:
Quite easy to understand and do it ourselves
Title: Saving Code   
Name: Divyesh Tandel
Date: 10/14/2008 2:56:24 AM
Comment:
hii author, i wanted to know how to save the contents we type in the rich text editor. can u give me the code for storing the contents typed in the rich text editor to the database using stored procedure.can u reply to this mail urgently.
Title: Cross Browser Editor   
Name: Haissam Abdul Malak
Date: 10/2/2007 12:45:29 PM
Comment:
Check the below link to get the latest version of this editor which works perfectly on FireFox and IE
http://dotnetslackers.com/community/blogs/haissam/archive/2007/10/02/rich-text-editor-works-on-ie-and-firefox.aspx

Regards,
Title: Hyper Link   
Name: JuanJo"
Date: 9/29/2007 4:01:37 PM
Comment:
Hi!
this is a very good Editor and also quiet simple to understand for beginners,...congratulations!
Now, I'd like to know how can I add an hyperlink option to text in this editor.
Can anyone help me please???????????
my mail is juanjo_dm7@yahoo.com
thnx
Title: format paragraph   
Name: melcom
Date: 9/18/2007 4:41:53 AM
Comment:
hi..

please help how to format paragraph? cause now the paragraph is to high...

thx
Title: how to create emoticon with string text   
Name: melcom
Date: 9/17/2007 12:40:29 AM
Comment:
Hi...
this is a great editor thank u for doing this

i wanna ask bout how to insert emoticon only by type a string text like ':-)' or ';-)', or ':-p' on textbox without click the image icon on toolbar?


thx
Title: how to get the preview   
Name: anupama
Date: 8/29/2007 2:49:33 AM
Comment:
hi Haissam

this editor code is realy helpful....thank u for this...

can u please tel me how can i get the preview of it in another textbox after a button click...

please help me im new to this...

reply ASAP...

thank you...
Title: How to set default text?   
Name: Ashutosh
Date: 7/23/2007 2:01:12 AM
Comment:
I wonder how to add some default text say - 'my text' in bold or any other format and yet allow user to begin editing it immidiately. can anyone help?
Title: Re:Multiple TextBoxs   
Name: Haissam Abdul Malak
Date: 7/13/2007 3:49:35 AM
Comment:
Kushal this is already a user control where you can place it more than one instance in a single page
for more information please read the first part of this editor
http://aspalliance.com/1092

Best Regards,
Title: Multiple TextBoxs   
Name: Kushal
Date: 7/13/2007 2:17:26 AM
Comment:
Can we make a user control for this textbox or may be some other trick by which it can be made possible that we can use this control "n" number of times in a page.

where "n" may be defined at runtime... :)
Title: How to add to asp.net 2 Project?   
Name: Jonathan Heweit
Date: 5/31/2007 6:32:49 PM
Comment:
Thanks a lot for this componente, is exactly what I need, can you show me how to add to an asp.net 2 project.

thanks again,
Title: urgent help help help pls.........   
Name: Saheel
Date: 5/30/2007 4:04:47 AM
Comment:
hi Haissam thanxs for this html editor first,
i am working on forums site where i used this html editor
in new forums its working very fine But when i want to use it on forums edit in this case it is retriving data through database but did not grant access for edit it cursor is not coming there for editing anything i used
..
If (_text <> String.Empty) Then
frameDiv.InnerText = _text
End If
Title: Re:not able to use with FireFox   
Name: Haissam Abdul Malak
Date: 5/26/2007 1:23:13 PM
Comment:
This Editor version is for IE browsers and does not support Firefox, i will work on the next version for enabling cross browsers.
Title: not able to use with FireFox   
Name: JaiPrakash
Date: 5/26/2007 9:23:19 AM
Comment:
Hi

Please tell me how can i able to use this editor with FireFox 2.0

Please reply urgently.
Title: can't use in FireFox 2.0   
Name: Jariaman Barus
Date: 5/26/2007 1:27:01 AM
Comment:
Why this editor can't be used in FireFox 2.0?
I tried to use it in IE 6.0, and works well, but in FireFox 2.0, it can not run well.
Could you explain it, please?

Best Regards,

Jariaman Barus
Title: Populate from database   
Name: mac
Date: 5/10/2007 11:55:16 AM
Comment:
How do i populate the rich text box from database. I am using following code but it is not showing up

((hamHtmlEditor)this.FindControl("HamHtmlEditor1")).ContentInnerHtml = String.Format("{0}",myReader[1]);
Title: ContentInnerHtml returning 'False'   
Name: BA
Date: 4/20/2007 5:44:01 PM
Comment:
Hi,
The editor is great!
I converted it to VB and removed the "emoticons" and "add image" portions. Everything else seems okay, except:
1. After clicking "Convert to HTML", the HTML div is not placed properly; it is displayed below the frame div
2. The ContentInnerHtml property is returning string value 'False' and not the HTML value
What am I missing?
Thanks!
Title: Thank you Hasan   
Name: Asad Raza
Date: 4/12/2007 8:56:47 AM
Comment:
IN His name the Lord of mercy and grace!

Salaam Hasan,

Thank you for your help, I try your suggestions, and will get back to you with whatever results.

Regards,
Asad.
Title: Re:Please Help   
Name: Haissam Abdul Malak
Date: 4/6/2007 11:38:41 AM
Comment:
2 properties (ContentText & ContentInnerHtml) are available for you to retrieve the text entered by the user. if you want to get the HTML of the user entered text use
string textEntered = ((hamHtmlEditor)this.FindControl("HamHtmlEditor1")).ContentInnerHtml;
Just remember you have to add ValidateRequest="False" in the page directive. if you just want the text without the formats use the ContentText property

Best Regards,
HC
Title: Please help   
Name: Asad Raza
Date: 4/6/2007 11:23:40 AM
Comment:
In His name,

Salaam Hasan,
Im working on an ASP project which requires a rich text editor in a form, I want to know how to save the edited contecnt in database using ASP and will the editing be reflected when I retrieve the text from database later?
Please help me,
May Allah bless you
Title: Re:reinventing the wheel   
Name: Haissam Abdul Malak
Date: 3/22/2007 3:18:31 PM
Comment:
Maybe you are right, there are some good text editors but the idea of the article, which you probably missed, is to give the readers specially the new developers an idea of how these editors are developed. Thank you for your comment.

Best Regards,
HC
Title: reinventing the wheel   
Name: jake h
Date: 3/22/2007 2:45:52 PM
Comment:
Instead of dumping your time and energy into something that has been done 100 times, how about you help out the development of some of the projects already made for this. The most notable one is FckEditor, the #1 javascript project on all of source forge. It supports ASP.NET, and a whole host of other languages, and they could use your help.

This just seems like a waste.
Title: Re:Spell check!   
Name: Haissam Abdul Malak
Date: 3/21/2007 8:40:42 AM
Comment:
I will consider adding a spell check soon when doing some updates on this editor.

Best Regards,
HC
Title: Spell check!   
Name: G
Date: 3/20/2007 10:44:39 AM
Comment:
How possible is it to integrate spell check?
Title: Re:More than one textbox on a page   
Name: Haissam Abdul Malak
Date: 3/19/2007 1:45:28 PM
Comment:
As you may realized this rich text editor is created as a user control. so it can be placed n-times on your webform

Best Regards,
Title: More than one textbox on a page   
Name: G
Date: 3/19/2007 12:58:45 PM
Comment:
Can you place more than one textbox on a page?
Title: Really Amazing   
Name: Kavitha
Date: 3/19/2007 2:37:08 AM
Comment:
Its working fine. thanks a lot.If it possible would i get code for inserting a table and hyperlink in richtext editor. If i can get this code, it will be helpfull a lot for me.

Thanks,
Kavitha.
Title: Re:Amazing   
Name: ha
Date: 3/5/2007 2:32:55 AM
Comment:
Download source code from below link
http://authors.aspalliance.com/HabdulMalak/1156.zip

Best Regards,
Title: Amazing...   
Name: AjayKumar
Date: 3/5/2007 1:54:10 AM
Comment:
hiit is looking good i need to download this editor how can i?
Title: Congratulations!   
Name: Bilal Haidar [MVP]
Date: 2/27/2007 5:10:51 AM
Comment:
I can see the editor is improving!! Owesome!

Best of luck,
Regards

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2014 ASPAlliance.com  |  Page Processed at 10/23/2014 2:39:12 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search