Rich Text Editor- Part I
page 3 of 6
by Haissam Abdul Malak
Average Rating: 
Views (Total / Last 10 Days): 58657/ 57

Javascript File

In this section we will write functions for handling the events raised by the user. First, we will define global variables. Each of these variables has its own functionality, but most are created to store a value indicating if an icon was previously clicked or no by default its value is equal to No. Only one variable has another purpose, this variable is called (sourceText) and will be equal to the text entered by the user.

Listing 2

var sourceText= '';
var imgStatusBold = 'No';
var imgStatusItalic = 'No';
var imgStatusUnderLine = 'No';
var imgStatusLeft = 'No';
var imgStatusCenter = 'No';
var imgStatusRight = 'No';
var imgStatusRemoveF= 'No';
var imgStatusWCount = 'No';
var imgStatusInsertL = 'No';

Based on the value of the above variables, when the user clicks on an icon, if the specific variable's value is equal to “Yes” it indicates that this icon is not as the equal to the one loaded when the user control has been loaded and then directly we change the icon to its first status and set its variable to “No.” If the value was “No” then we will change the icon and its proper variable to “Yes.”

Three common functions are called onmouseover, onmouseup, and onclick. Onmouseover, a function (ChangeImg()), is used to change the icon when the user places his mouse at a certain icon. This function takes 2 parameters (icon id and the new icon name). Note that the toolbar icons are contained in a folder called "Images" under the root element of the web application.

Listing 3


function ChangeImg(id, imgsrc)
var imgSrc = "Images/" + imgsrc;
document.getElementById(id).src = imgSrc;

Onmouseup function is used to return the icon to its previous state when the mouse leaves a specific icon; it takes 3 parameters (icon id, new icon name, and a variable).

Listing 4


function ReturnImg(id, imgsrc, ownVar)
if(ownVar == 'No')
var imgSrc = "Images/" + imgsrc;
document.getElementById(id).src = imgSrc;

The third parameter is used to indicate either this icon was selected or not. Its default value is No.

Onclick function is called to perform a specific action. A single javascript method is used for all the actions, plus for each action a specific criteria.

Listing 5


The above method is used to align the text entered by the user to the left. ExecCommand is used to execute a command on a document. It consists of predefined functions which are used to manipulate the page layout directly into the browser. Do not use it until the page has finished loading.

Listing 6

function MakeBold(boldover, bold)
var img = document.getElementById('Bold')       
var imgBold = "Images/" + boldover
var imgNotBold = "Images/" + bold
img.src = imgBold;
if(imgStatusBold == 'Yes')
img.src = "Images/" + bold;
imgStatusBold= 'Yes'

The function above is used to format the text entered by the user as bold. When he clicks on this icon, we should change it to another one. Set the global variable for this action to “Yes” which means that it has been selected. We will use this variable each time the user clicks on it to see if it has been previously selected or no, and then we will make the transformation to the text into bold. It takes 2 parameters, the first is to store the bold-over image location (url) and the second is to store the bold image location (url). The same concept is used to make the text Italic and underlined.

To apply alignments into the text, we use the same as the MakeBold() function, but instead, the 3 alignment functionalities work in a parallel way which means that if a specific alignment is selected all others will be unselected and will retain their original status.


For a complete reference about the execCommand command list visit

Now we will create a function that counts how many words the user has entered. A variable is defined with default value equal to 0. Another variable is defined that holds the text entered. We will split the spaces in this variable, add the splitting results to an array and check each element length in the array. If it is equal to zero then it is a space, else add 1 to the specific variable. After this stage we will set the value of the textbox to the count variable.

Listing 7

var wordCount = document.frames['HamHtmlEditor1_content'].document.body.innerText;
var count = 0;
countWithSpace = wordCount.replace('\n', '');
countWithoutSpaces = countWithSpace.split(' ');
count +=1;
window.parent.document.getElementById('HamHtmlEditor1_TxtCount').value = count;

When the "Remove Formatting" image is clicked, we call a javascript function which sends "RemoveFormat" to the execCommand to remove all the formats applied to the text. It is very useful if a user wants to remove all the formats that he already applied into the text.


Listing 8

function RemoveFormating()

"Undo" & "Redo" are done the same as the above javascript function, but they send "undo" or "redo" to the execCommand to undo or redo the user action. It takes 1 parameter which is the execCommand function name.

Listing 9

function Formats (style)

When the user clicks on "Insert emoticons" icon, we will show the third div layer placed directly after this icon which contains all the emoticons images. When doing this we have to use Javascript.

Listing 10


function ShowDiv(images)
var div = document.getElementById(images);
if( == 'block') = 'none';
else = 'block';

Figure2: Shows the editor when the "insert emoticons" is clicked.


When the user clicks on any emoticon inside the third div layer, another javascript function is called to insert that image and to place the cursor back to the editor. This method takes 3 parameters. The first parameter is passed to execCommand that inserts the image into the document (insertimage), the second is the image location (url), and the third is the id of the div layer. Note that the emoticons are placed inside a folder called "Emoticons" under the root element of the web application.

Listing 11

function insertImages(style,url,images)
document.getElementById(images).style.display = 'none'

When the "View as HTML" image is clicked, the second div layer is shown and the first layer is hidden. The "readonly" property of this div layer is set to "true" which means that the user at runtime cannot edit it, then we will get the HTML code and insert it into that div layer.

Listing 12


function TransformtoHtml()
document.getElementById('HamHtmlEditor1_Div2').style.display = 'block';
document.getElementById('HamHtmlEditor1_Div2').innerText = 

When the "Design view" image is clicked, the third div layer (containing the HTML code) is just hidden.

Listing 13

function TransformToText()
document.getElementById('HamHtmlEditor1_Div2').style.display = 'none';

The dropdown lists are used to let the user selects the predefined data entered to manipulate the text.

The first one is used to change the font size; sizes may vary from 1 (10 pt) to 7 (22 pt). We will handle the onclick event by calling a javascript function. This function gets the user selected from the dropdown list and sends it as a third parameter to the execCommand command. The first parameter is the FontSize, in which you are telling this command to execute the FontSize function with its specific size. Note that the font sizes in the dropdown list are predefined in the user control HTML code created earlier.

Listing 14


function ChangeFont()
var fontSize = document.getElementById('FontDropDownonchange');

The code below is used to change the font name; the first parameter of the execCommand command takes fontname as first parameter, the second is false or 0, and the third is the user’s selection.

Listing 15

function ChangeFontName()
var fontName = document.getElementById("FontFamilyName");
'FontName',false, document.frames['HamHtmlEditor1_content'].focus();

The third is used to change the font color; the colors are predefined so if you want to add more colors you can modify the HTML code of this dropdown list.

Listing 16

function ChangeFontColor()
var fontColor = document.getElementById("Color");

The final function will assign the text entered by the user to a hidden input HTML element and store its specific HTML code to another hidden HTML element. It is called when the editor loses the focus (onblur) event of the iframe containing the HTML page. In this way, we can use the two properties created as you will see in the next section to get the hidden inputs values from the code behind.

Listing 17

function CloneText()
 = document.frames['HamHtmlEditor1_content'].document.body.innerText;

After completing this stage, you will have the javascript file ready; all you need to do now is to link it to the page where you want to use the user control by adding the below code in the <head> tag.

<script src="HTMLEditor.js" language="javascript" type="text/javascript></script>

If you want to debug the code included in the javascript, add the word "debugger;" at the beginning of the code. In this way the compiler will start the debugging mode. Or you can go to your internet explorer options, navigate to Advanced, unselect the disable script debugging (internet explorer), unselect disable script debugging (other) and now add your breakpoints.


View Entire Article

User Comments

Title: Tuck you mother tucker   
Name: Tuck you
Date: 2012-11-01 10:30:29 PM
Tuck you
Title: 123   
Name: 123
Date: 2012-08-16 3:40:01 AM
Title: FUCK YOU   
Date: 2012-08-16 3:39:33 AM
Title: gerre   
Name: sdferertre
Date: 2012-08-15 11:23:00 PM
sadawfklerfmpo tlfmgmfdgl;sdfg
Title: text   
Name: jisus
Date: 2012-05-15 11:55:50 AM
no esta muy bueno...
Title: Editot   
Name: jorge
Date: 2012-05-15 11:53:14 AM
Title: Editor   
Name: Ashar
Date: 2011-01-17 3:39:42 AM
Very good
Date: 2010-09-25 6:49:28 AM
Title: Muy Bueno!   
Name: Ricky
Date: 2010-07-16 10:11:42 AM
Es lo que estaba buscando! Gracias!!!!
Title: shalu   
Name: shalu k s
Date: 2010-06-28 3:20:55 AM
How can we add a music player with this editor.....
Title: Creation of Table   
Name: Bitu Kumar
Date: 2010-03-08 12:12:54 AM
Add the facility to create the table and fill its data...

Title: questian about text editor   
Name: Rajani
Date: 2009-10-23 3:34:31 AM
hi, i am Rajani. how i can get the advanced text editor for ASP.NET.
Title: Cannot get the message when use in email.   
Name: annie
Date: 2009-09-14 2:41:18 AM
I hv use this text editor in my compose email system but the mail that i have send out did not have the message that i write and edit. Someone lease tell me how to solve this? Please send to my mail id:
Title: execCommand is not working in mozilla   
Name: balu
Date: 2009-05-28 7:22:13 AM
execCommand is not working in mozilla .pls find the alternate.
and send me my mail id :

Thanks and Regards
Title: Regarding RTF container Second Release   
Name: Shashank Shekhar
Date: 2009-04-18 2:54:40 AM
we would like to know the actual time by which Second Version of RTF Container will be available on your site.

With Regards
Shashank Shekhar
Title: Some questions about text editor   
Name: xyz
Date: 2009-03-12 3:03:26 AM
Hi, I am using this control for a website i am developing...the editor is working fine in IE and mozilla...but it does not work in Opera???
Help will be much appreciated...
Title: array   
Name: pushparajan
Date: 2009-02-22 11:28:18 PM
i have using proigram vb coding . i want quiky get array value from textfile
Title: Rich texteditor   
Name: xxx
Date: 2008-12-24 2:25:35 AM
How i get the rich text editor in yahoo
Title: Reading the innerhtml from the control   
Name: Jason
Date: 2008-12-02 10:44:29 AM
Hi, I am using this control for a website I am developing and its the first time I have used a RichText Editor. This might be a stupid question but how do I read the text and innerhtml representation of the text from the control?
Title: please help me quikly   
Name: mona
Date: 2008-10-31 8:45:53 AM
I use the text editor given by u on local machine but the function of bold,italic,underline all that functions not working. It shows error of 'document.frames.HamHtmlEditor1_content.document' is null or not an object. So what that error means. I follow all instruction given here.
Plz any know abt it send me reply to
i am just start this career i do not know a lot in it i want this for my first website (website builder) i do not know how i can do it help me
Title: test editor   
Name: ahmad musa
Date: 2008-06-11 3:43:39 AM
how are you?
good luck man
thats my friend mon
Title: error about editor   
Name: Ritu
Date: 2008-05-13 12:16:07 AM
I use the text editor.
but i want to save the text written in the text editor.
will you help me?
plz about this mail me at
Title: Error about Editor   
Name: Prashant
Date: 2008-04-24 9:33:27 AM
I use the text editor given by u on local machine but the function of bold,italic,underline all that functions not working. It shows error of 'document.frames.HamHtmlEditor1_content.document' is null or not an object. So what that error means. I follow all instruction given here.
Plz any know abt it send me reply to
Title: PostBack Event in Rich Text Editor   
Name: Roja
Date: 2008-04-16 8:17:22 AM
Hello Sir,
if a postback happens on the form the contents of the editor control gets lost. we hav to retype it again.
For that I used the code whatever you mentioned below i.e.
if (_text != string.Empty)
frameDiv.InnerText = _text;
ContentTxt.Value = "Hi,How R U?";
i put the above code under page_load event of EDitor
then IFrame become invisible.
i need the solution very urgent.please help me.............
Title: Good   
Name: Myname
Date: 2008-03-17 4:19:42 AM
Very good!
Title: How to download free Html Editor for   
Name: RajaPriya
Date: 2008-03-06 11:55:34 PM

How can i download the free Html Editor for
Title: re: Nice edito, but not working   
Name: Haissam Abdul Malak
Date: 2008-02-14 1:50:32 PM
Can u send me the VB.NET project to figure this out?
Title: Fantastic job done   
Name: Shaoun1000
Date: 2008-02-06 12:52:00 PM
I am very happy as you did this for us. But i am a VB programmer and facing proglem using this. You promised to release it's version as soon as possible for you. But where is it, sir. Please, i am waiting.

Kindest regards... Shaoun
Title: download   
Name: priya
Date: 2008-02-04 10:44:33 PM
where can we download this project
Title: Nice edito, but not working   
Name: May
Date: 2007-12-19 8:16:34 PM
I converted it into the text htmleditor value is empty and the the HTML View is not working.

do you have version please.
Title: The code asp   
Name: Phuc Hoang
Date: 2007-12-05 8:28:23 PM
How can i download the code asp
Title: Nice TextBox   
Name: bala
Date: 2007-10-29 6:03:12 AM
where is the download control?
Title: Cross Browser Editor!!   
Name: Haissam Abdul Malak
Date: 2007-10-02 12:42:35 PM
Check the below link to get the latest version of this editor which works perfectly on FireFox and IE

Title: ContentInnerHtml returning False in Vb   
Name: The Rock
Date: 2007-08-28 10:27:48 AM

Nice Code, I converted it into and when I try to retrieve Editor.ContentInnerHtml its returning "False". Also the HTML View is not working. I'm I missing anyting here?

Title: help on how to display the contents   
Name: anupama
Date: 2007-08-28 5:31:18 AM
hi haissam

thanks for the editor its realy gud....
but i hav one problem...when i try to display the contents typed i get only the single line...

im using textbox to display the preview of it on a button click...
please give me a idea how to display it...
thank you...
Title: Good work   
Name: Rama
Date: 2007-08-23 10:21:21 AM
Hi Haissam,
Thanks alot for your useful article.It helped me to save alot of time.

Title: Re:where is the download link   
Name: Haissam Abdul Malak
Date: 2007-08-16 11:44:43 AM
Title: where is the download link   
Name: where is the download link
Date: 2007-08-16 8:08:30 AM
where is the download link
Title: Need help for Rich Text box   
Name: Mahesh
Date: 2007-06-29 7:03:50 AM
I am also using a rich text editor for word processing. But i am sending XML to save the data. I am using another page to save the data (savepage.asp) in that page i am parsing the xml document and sending into the databasedll to save the record.
My problem is::
after parsing the data into savepage.asp it returns NULL values for some records but i am able to save the small piece of records.
I configured the same application code into another IIS and passed the same data for which i was getting NULL values. But it is working fine for another system.
Title: Re:Good One   
Name: Haissam Abdul Malak
Date: 2007-06-11 3:06:04 PM
Please check the start of the comments where u will find the link to download it.
Title: Good One   
Name: Ravi Kiran
Date: 2007-06-11 6:44:23 AM
is this available for download
Title: Remove ONLY 'FontSize' ? Is it possible?   
Name: Kate
Date: 2007-06-07 3:42:03 AM
ups.. forgot to enter my email.. :)
Title: Remove ONLY 'FontSize' ? Is it possible?   
Name: Kate
Date: 2007-06-07 3:40:15 AM
hi Haissam :)
Thank you for the useful information here!
I was thinking.. command 'RemoveFormat' removes all the formats applied to the text. But what should i do if i want to remove only 'FontSize' for instance? Is there any way this can be done? Please help if you can..
Thanks a lot!!!
Title: urgent ..........pls   
Name: Sahil
Date: 2007-06-05 9:36:13 AM
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: Thanks   
Date: 2007-05-29 9:18:47 PM
Thanks alot for your very useful article.It helped me alot.
Can you please guide me how to save the content of this editor to data base?!
Title: Error   
Name: Jey
Date: 2007-05-25 9:46:14 PM
i try use your code, but i get some error.
i use VS2005.
Could you explain for me?
please mail me at


Title: FreeTextBox   
Name: Marc
Date: 2007-05-15 10:34:02 AM
I am using FreeTextBox and I am content about it. Why did you reject it? What makes your editor better?
Title: Re:Good one   
Name: Haissam Abdul Malak
Date: 2007-05-01 5:57:34 PM
You can for sure download it from

Best Regards,
Title: Good one   
Name: Sushma
Date: 2007-05-01 4:00:52 AM
Is this avaiable for download
Title: Fantastic   
Name: Ahmad Murey
Date: 2007-04-15 10:15:47 AM
This is so good man...
I 've been searching for this magical code one week a ago and i had no chance to see (onload="document.frames['HamHtmlEditor1_content'].document.designMode='on'").

This is amazing..

Title: Excellent   
Date: 2007-03-22 2:55:34 AM
In His name,

Good resource on text editor.
I need to add a text editor in one of my applications and then when I retrieve the data from database the same edited data should be displayed.
Please help me to know that how I can add this feature?
Title: Re:Good Work   
Name: Haissam Abdul Malak
Date: 2007-03-21 5:09:47 PM
Thank you atarikg for your comments. Hope that these two articles gave u a deeper idea about the subject.

Best Regards,
Title: Good Work   
Name: atarikg
Date: 2007-03-20 3:51:15 AM
Thanks for this pretty article and i ll read immediateliy because i need one like that and i ll read part 2 :) thanks again and i am gonna wait your new articles as soon as possible...
Title: assigning values to the html editor   
Name: Mubaraka
Date: 2007-02-26 2:13:29 AM
thanks for the help but unfortunately it does not help. The problem is that the page load of the the editor code behind is called after the page load of my form(form in which i hav put the editor control) happens.Also if a postback happens on the form the contents of the editor control gets lost. we hav to retype it again. Please help ASAP i need it urgently
Title: Re:assigning values to the html editor   
Name: Haissam Abdul Malak
Date: 2007-02-23 6:45:45 PM
Mubaraka thank you for your comment. to assign text to the editor you have to add the below code in the page_load of the editor code behind
if(_text != string.Empty)
frameDiv.InnerText = _text;
After you add the above code, try to assign a value to the ContentText property

Best Regards,
Title: assigning values to the html editor   
Name: Mubaraka
Date: 2007-02-23 7:36:28 AM
When i assign a value to the ContentInnerHtml or ContentTxt property it does not get assigned. it only assigns "" to both the properties. here is the code please can somebody help me?

RTProbDesc.ContentInnerHtml = str;
RTProbDesc.ContentText = str;

here RTProbDesc is the id of my htmlEditor control and str is the value i m trying to assign it
Title: Some help   
Name: Mubaraka
Date: 2007-02-22 4:27:11 AM
This is graet but just wanted to know that if i save the text from this HTML Editor in my database wnd then retrieve it will the formatting remain. Will appreciate a speedy response
Title: Re:Editor   
Name: Haissam Abdul Malak
Date: 2007-02-16 11:31:56 AM
Thank you for your comments, now this editor is available with C# code, but i will convert it to VB.NET code and uploaded it for you as soon as possible. i'm been busy these days working with the PART II of this editor, so check it out soon
Title: Editor   
Name: Nazeer
Date: 2007-02-15 11:20:31 AM
Well you have created the rich text editor control very prfectly and accurately may ALLAH bless you and give you mor and more knowledge...

But I need the code should work apsx.vb platform and combine e-mail program
If u have solutions Please send id
with regards
Title: Nice work... :)   
Name: Syed Fasih
Date: 2007-02-14 7:40:57 AM
Well you have created the rich text editor control very prfectly and accurately may ALLAH bless you and give you mor and more knowledge...
Title: Re:Required Upgrades   
Name: Haissam Abdul Malak
Date: 2007-01-09 7:02:41 AM
The next version of this editor will include lots of new features and bug fixes, and i will try as much as i can to enable this editor to be compatible in all browsers.
this comment has been taken into serious considerations.
Title: Required Upgrades   
Name: John Gera
Date: 2007-01-09 5:51:05 AM
I added the 'JustiyFull' functionality, which is not included in the above with little bit of changes to the code.
This Rich Text Editor works perfectly on IE but doesn't work in rest of the browsers like Opera, FireFox, Netscape. If you can upgrade this to a Cross Browser Rich Text Editor, that will be of real great help!! , but anyways great job!! Keep going..
Title: Thank U   
Name: Haissam Abdul Malak
Date: 2007-01-08 6:42:54 AM
Thank U Guys... Hope to receive ur feedbacks after you use it.
Title: Nice   
Name: Erick Du
Date: 2007-01-05 8:41:59 PM
It's a good thing to study HtmlEditor
Title: Excellent   
Name: Shaho
Date: 2007-01-04 8:53:41 PM
Excellent ! Please keep it up.
Title: Editor Download   
Name: Haissam Abdul Malak
Date: 2007-01-04 7:25:49 AM
You can download the rich text editor from

Best Regards
Title: Good Work   
Name: Bilal Hadiar [MVP]
Date: 2007-01-04 1:56:22 AM
Nice Editor Haissam!!

Waiting for the second version of it with the improvements on it!!


Product Spotlight
Product Spotlight 

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

©Copyright 1998-2023  |  Page Processed at 2023-03-21 11:15:49 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search