Rich Text Editor- Part I
page 1 of 6
Published: 04 Jan 2007
Abstract
In this article Haissam Abdul Malak will explain in detail how to create a rich text editor using javascript. It can be used by users in web applications, especially in forums, communities, and blogs. This editor supports functionalities needed to create text based on XHTML elements.
by Haissam Abdul Malak
Feedback
Average Rating: 
Views (Total / Last 10 Days): 123356/ 575

Introduction

My friend was working on a project (building a blog website) and faced problems concerning which text editor to use. After researching all the free editors that he found were not as he expected so I took the responsibility to create a rich text editor user control and I thought it would be a good idea to share this with you in order to accomplish our goal which consists of knowledge sharing.

The editor contains the following elements:

1.    A toolbar containing all the functionalities (listed below)

·         Alignment (left, center, right)

·          Font formatting (bold, underline, italic, font size, font name, font color)

·         Word counts, remove formatting, insert lines, undo, redo, and insert emoticons

2.    An HTML page integrated inside an Iframe and a text area element integrated inside another iframe. Note that the two iframes are placed above each others.

3.    Two icons for displaying "View as HTML" and "Design Mode," a textbox holding the value of the word count, and finally two hidden textboxes  to preserve the data entered by the user.

To keep up with this demonstration, you should have knowledge in javascript language and in HTML.


View Entire Article

User Comments

Title: Tuck you mother tucker   
Name: Tuck you
Date: 11/1/2012 10:30:29 PM
Comment:
Tuck you
Title: 123   
Name: 123
Date: 8/16/2012 3:40:01 AM
Comment:
123
Title: FUCK YOU   
Name: FUCK YOU
Date: 8/16/2012 3:39:33 AM
Comment:
FUCK YOU BITCH !
Title: gerre   
Name: sdferertre
Date: 8/15/2012 11:23:00 PM
Comment:
sadawfklerfmpo tlfmgmfdgl;sdfg
dfgkdflgdgfdg
dfmgsdpf
Title: text   
Name: jisus
Date: 5/15/2012 11:55:50 AM
Comment:
no esta muy bueno...
Title: Editot   
Name: jorge
Date: 5/15/2012 11:53:14 AM
Comment:
ok
Title: Editor   
Name: Ashar
Date: 1/17/2011 3:39:42 AM
Comment:
Very good
Title: COUNT NOT WORKING PROPERLY   
Name: PRADEEPKUMAR1988
Date: 9/25/2010 6:49:28 AM
Comment:
THE COUNT OPTION IS NOT WORKING PROPERLY.... PLEASE CHECK THAT.... WHEN WE PRESS ENTER AND TYPE A WORD IT IS COUNTING AS IT IS IN THE SAME COLUMN
Title: Muy Bueno!   
Name: Ricky
Date: 7/16/2010 10:11:42 AM
Comment:
Es lo que estaba buscando! Gracias!!!!
Title: shalu   
Name: shalu k s
Date: 6/28/2010 3:20:55 AM
Comment:
How can we add a music player with this editor.....
Title: Creation of Table   
Name: Bitu Kumar
Date: 3/8/2010 12:12:54 AM
Comment:
Add the facility to create the table and fill its data...

Thanks
Title: questian about text editor   
Name: Rajani
Date: 10/23/2009 3:34:31 AM
Comment:
hi, i am Rajani. how i can get the advanced text editor for ASP.NET.
my Email-id:itstorajani@yahoo.com
Title: Cannot get the message when use in email.   
Name: annie
Date: 9/14/2009 2:41:18 AM
Comment:
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: annie870228@yahoo.com.
Thanks.
Annie
Title: execCommand is not working in mozilla   
Name: balu
Date: 5/28/2009 7:22:13 AM
Comment:
execCommand is not working in mozilla .pls find the alternate.
and send me my mail id : balu_526@yahoo.com.


Thanks and Regards
Balu.
Title: Regarding RTF container Second Release   
Name: Shashank Shekhar
Date: 4/18/2009 2:54:40 AM
Comment:
Sir,
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: 3/12/2009 3:03:26 AM
Comment:
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: 2/22/2009 11:28:18 PM
Comment:
i have using proigram vb.net vb coding . i want quiky get array value from textfile
Title: Rich texteditor   
Name: xxx
Date: 12/24/2008 2:25:35 AM
Comment:
How i get the rich text editor in yahoo
Title: Reading the innerhtml from the control   
Name: Jason
Date: 12/2/2008 10:44:29 AM
Comment:
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: 10/31/2008 8:45:53 AM
Comment:
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 hamamseesea@yahoo.com
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: 6/11/2008 3:43:39 AM
Comment:
how are you?
good luck man
thats my friend mon
Title: error about editor   
Name: Ritu
Date: 5/13/2008 12:16:07 AM
Comment:
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 ritusainik@gmail.com
Title: Error about Editor   
Name: Prashant
Date: 4/24/2008 9:33:27 AM
Comment:
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 contact_prashantp@hotmail.com.
Title: PostBack Event in Rich Text Editor   
Name: Roja
Date: 4/16/2008 8:17:22 AM
Comment:
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: 3/17/2008 4:19:42 AM
Comment:
Very good!
thanks
Title: How to download free Html Editor for vb.net   
Name: RajaPriya
Date: 3/6/2008 11:55:34 PM
Comment:
Hello,

How can i download the free Html Editor for vb.net.
Title: re: Nice edito, but not working   
Name: Haissam Abdul Malak
Date: 2/14/2008 1:50:32 PM
Comment:
Can u send me the VB.NET project to figure this out?
Title: Fantastic job done   
Name: Shaoun1000
Date: 2/6/2008 12:52:00 PM
Comment:
Hello,
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 vb.net version as soon as possible for you. But where is it, sir. Please, i am waiting.

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

do you have vb.net version please.
Title: The code asp   
Name: Phuc Hoang
Date: 12/5/2007 8:28:23 PM
Comment:
How can i download the code asp
Title: Nice TextBox   
Name: bala
Date: 10/29/2007 6:03:12 AM
Comment:
where is the download control?
Title: Cross Browser Editor!!   
Name: Haissam Abdul Malak
Date: 10/2/2007 12:42:35 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: ContentInnerHtml returning False in Vb   
Name: The Rock
Date: 8/28/2007 10:27:48 AM
Comment:
Hi,

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

Thanks
Title: help on how to display the contents   
Name: anupama
Date: 8/28/2007 5:31:18 AM
Comment:
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: 8/23/2007 10:21:21 AM
Comment:
Hi Haissam,
Thanks alot for your useful article.It helped me to save alot of time.

Thanks
Rama
Title: Re:where is the download link   
Name: Haissam Abdul Malak
Date: 8/16/2007 11:44:43 AM
Comment:
http://authors.aspalliance.com/HabdulMalak/1092.zip
Title: where is the download link   
Name: where is the download link
Date: 8/16/2007 8:08:30 AM
Comment:
where is the download link
Title: Need help for Rich Text box   
Name: Mahesh
Date: 6/29/2007 7:03:50 AM
Comment:
Hi,
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: 6/11/2007 3:06:04 PM
Comment:
Please check the start of the comments where u will find the link to download it.
Title: Good One   
Name: Ravi Kiran
Date: 6/11/2007 6:44:23 AM
Comment:
is this available for download
Title: Remove ONLY 'FontSize' ? Is it possible?   
Name: Kate
Date: 6/7/2007 3:42:03 AM
Comment:
ups.. forgot to enter my email.. :)
eka@saatec.ge
Title: Remove ONLY 'FontSize' ? Is it possible?   
Name: Kate
Date: 6/7/2007 3:40:15 AM
Comment:
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: 6/5/2007 9:36:13 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: Thanks   
Name: s_a_200263@yahoo.com
Date: 5/29/2007 9:18:47 PM
Comment:
Hello,
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: 5/25/2007 9:46:14 PM
Comment:
i try use your code, but i get some error.
i use VS2005.
Could you explain for me?
please mail me at jariamanbarus@gmail.com

Regards,

Jey
Title: FreeTextBox   
Name: Marc
Date: 5/15/2007 10:34:02 AM
Comment:
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: 5/1/2007 5:57:34 PM
Comment:
You can for sure download it from
http://authors.aspalliance.com/HabdulMalak/1092.zip

Best Regards,
HC
Title: Good one   
Name: Sushma
Date: 5/1/2007 4:00:52 AM
Comment:
Hi,
Is this avaiable for download
Title: Fantastic   
Name: Ahmad Murey
Date: 4/15/2007 10:15:47 AM
Comment:
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..

thanks.
Regards.
Title: Excellent   
Name: ASAD RAZA
Date: 3/22/2007 2:55:34 AM
Comment:
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: 3/21/2007 5:09:47 PM
Comment:
Thank you atarikg for your comments. Hope that these two articles gave u a deeper idea about the subject.

Best Regards,
HC
Title: Good Work   
Name: atarikg
Date: 3/20/2007 3:51:15 AM
Comment:
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: 2/26/2007 2:13:29 AM
Comment:
Hi,
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: 2/23/2007 6:45:45 PM
Comment:
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: 2/23/2007 7:36:28 AM
Comment:
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: 2/22/2007 4:27:11 AM
Comment:
HI,
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: 2/16/2007 11:31:56 AM
Comment:
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: 2/15/2007 11:20:31 AM
Comment:
Asalam-o-Alaikum,
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 email.my id nazeermm@gmail.com
with regards
Nazeer
Title: Nice work... :)   
Name: Syed Fasih
Date: 2/14/2007 7:40:57 AM
Comment:
Asalam-o-Alaikum,
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: 1/9/2007 7:02:41 AM
Comment:
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: 1/9/2007 5:51:05 AM
Comment:
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: 1/8/2007 6:42:54 AM
Comment:
Thank U Guys... Hope to receive ur feedbacks after you use it.
Title: Nice   
Name: Erick Du
Date: 1/5/2007 8:41:59 PM
Comment:
It's a good thing to study HtmlEditor
Title: Excellent   
Name: Shaho
Date: 1/4/2007 8:53:41 PM
Comment:
Excellent ! Please keep it up.
Title: Editor Download   
Name: Haissam Abdul Malak
Date: 1/4/2007 7:25:49 AM
Comment:
You can download the rich text editor from
http://authors.aspalliance.com/HabdulMalak/1092.zip

Best Regards
Title: Good Work   
Name: Bilal Hadiar [MVP]
Date: 1/4/2007 1:56:22 AM
Comment:
Nice Editor Haissam!!

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

Regards

Product Spotlight
Product Spotlight 





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


©Copyright 1998-2014 ASPAlliance.com  |  Page Processed at 9/16/2014 9:29:31 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search