Rich Text Editor- Part I
 
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): 82597/ 112

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.

Add HTML code to the user control

In this section we will create a user control (hamHtmlEditor.ascx) and create the necessary HTML elements. Note that the user control does not contain <head>, <body> or <form> tags.

We will create 3 tables for displaying the icons for the toolbar plus 3 dropdown lists; 2 are placed at the top of the control and 1 is placed at the bottom of the control.  Three common events are being used for each icon, onmouseover, onmouseup, onclick and they are handled using javascript which are all embedded inside a javascript file. Separating the javascript code from the HTML code will let your code be well understood and debugged. Then we will create 3 div layers, the first layer contains the already created HTML page (TextArea.htm). I have used an HTML page because if the user has entered a url it will automatically render its HTML code the same for the sake of using icons inside your text. The second will contain a text area element which is used for displaying the HTML code to the user during runtime (hidden by default), and the third will contain the emoticons which will be shown when the user click on the insert emoticons image (hidden by default).

To enable the user to enter data at runtime, you have to add set the page "designMode" property on to where the control is being used.

Listing 1

 
(onload="document.frames['HamHtmlEditor1_content'].document.designMode='on'")

 Please download the project to see exactly how we created all the HTML tags.

Figure1

 

 

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

 
document.frames['HamHtmlEditor1_content'].document.execCommand('JustifyLeft',false,null);

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')
{
imgStatusBold='No';
img.src = "Images/" + bold;
}
else
{
imgStatusBold= 'Yes'
}
document.frames['HamHtmlEditor1_content'].document.execCommand('bold',false,null);
document.frames['HamHtmlEditor1_content'].focus();                
}

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 http://www.course.com/downloads/newperspectives/crweb3/documents/dhtml_t02.html.

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(' ');
for(i=0;i<countWithoutSpaces.length;i++)
{
if(countWithoutSpaces[i].length>0)
{
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()
{     
document.frames['HamHtmlEditor1_content'].document.execCommand('RemoveFormat');
document.frames['HamHtmlEditor1_content'].focus();
}

"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)
{
document.frames['HamHtmlEditor1_content'].document.execCommand(style);
document.frames['HamHtmlEditor1_content'].focus();
}

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(div.style.display == 'block')
div.style.display = 'none';
else
div.style.display = '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'
document.frames['HamHtmlEditor1_content'].focus();
HamHtmlEditor1_content.document.execCommand(style,'',url)
document.frames['HamHtmlEditor1_content'].focus();
}

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 = 
document.frames['HamHtmlEditor1_content'].document.body.innerHTML;
}

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');
document.frames['HamHtmlEditor1_content'].document.execCommand(
'FontSize',0,fontSize.options[fontSize.selectedIndex].text);
document.frames['HamHtmlEditor1_content'].focus();
}

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");
document.frames['HamHtmlEditor1_content'].document.execCommand(
'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");
document.frames['HamHtmlEditor1_content'].document.execCommand(
'ForeColor',false,fontColor.options[fontColor.selectedIndex].text);
document.frames['HamHtmlEditor1_content'].focus();
}

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.getElementById('HamHtmlEditor1_ContentTxt').innerText
 = document.frames['HamHtmlEditor1_content'].document.body.innerText;
document.getElementById('HamHtmlEditor1_ContentHtml').value=
 document.frames['HamHtmlEditor1_content'].document.body.outerHTML;
}

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.

 

Editor Properties

If you want to save the text entered by the user to a .txt file or the HTML code to another .txt file, you can use the two properties added to this control.

First create two fields in your ascx.cs page.

Listing 18

 
protected System.Web.UI.HtmlControls.HtmlInputText ContentTxt;
protected System.Web.UI.HtmlControls.HtmlInputText ContentHtml;

Create two protected string variables which will store the above created fields' values.

Listing 19

 
protected string _text;
protected string _html;

The first property is called "ContentText" which can get the text and assign it to a string variable in your code behind.

ContentTxt is declared as HtmlInputText control in the field area. Its property value will be stored into the _text string variable.

Listing 20

 
public string ContentText
{
get 
{
return _text = ContentTxt.Value;
}
set
{
_text = value;
}
}

The second is called "ContentInnerHtml" which can get the specific HTML code for the entered text.

ContentInnerHtml is declared as HtmlInputText in the field area. Its property value will be stored into the _html string variable.

Listing 21

 
public string ContentInnerHtml
{
get
{
return _html  = ContentHtml.Value;
}
set
{
_html = value;
}
}

 

Adding a Stylesheet

In this section we will create a Stylesheet (Styles.css) to modify the toolbar and iframes UI. We will set the toolbar background color to blue and the background to repeat. Then we will give the same color to both the right and bottom borders of iframes. You are free to add whatever modification on the control user interface (UI) by modifying the below code.

Listing 22

 
.HtmlView
{
      background-color:white;
      border-bottom-width:medium;
      border-bottom-style:solid;
      border-bottom-color:cornflowerblue;
      border-right-width:medium;
      border-right-color:cornflowerblue;
      border-right-style:solid;
}
.FirstDiv
{
      background-color:white;
      border-bottom-width:medium;
      border-bottom-style:solid;
      border-bottom-color:cornflowerblue;
      border-right-width:medium;
      border-right-color:cornflowerblue;
      border-right-style:solid;
}
.toolbar
{
 background-color:cornflowerblue;
 background-repeat:repeat;
 }

Now it is time to link this Stylesheet to your webform where you dragged the user control by adding the below code inside the <head> tag.

<LINK href="Styles.css" type="text/css" rel="stylesheet">

Figure 3

Note that if you need to include more than one instance of the user control in a page, you have to create dynamical ids for all the div layers. You may have noticed the div layers’ ids are set to "userControlID_divlayer."

 

Conclusion

Creating you own rich text editor is not hard as it may seem. As you saw in this article, we explained it in detail using the javascript language and XHTML. This is the first release of this editor and we highly appreciate that you use it and provide us with your feedback. The second release will for sure have more features and if you have any new features or ideas they are most welcomed. We are currently working on the second release and it will be posted in this community and include Copy, paste, cut, bulleted list, numbered list, print and a more customizable toolbar. Hope that it was worth reading.

Download

Happy Coding!



User Comments

Title: Tuck you mother tucker   
Name: Tuck you
Date: 2012-11-01 10:30:29 PM
Comment:
Tuck you
Title: 123   
Name: 123
Date: 2012-08-16 3:40:01 AM
Comment:
123
Title: FUCK YOU   
Name: FUCK YOU
Date: 2012-08-16 3:39:33 AM
Comment:
FUCK YOU BITCH !
Title: gerre   
Name: sdferertre
Date: 2012-08-15 11:23:00 PM
Comment:
sadawfklerfmpo tlfmgmfdgl;sdfg
dfgkdflgdgfdg
dfmgsdpf
Title: text   
Name: jisus
Date: 2012-05-15 11:55:50 AM
Comment:
no esta muy bueno...
Title: Editot   
Name: jorge
Date: 2012-05-15 11:53:14 AM
Comment:
ok
Title: Editor   
Name: Ashar
Date: 2011-01-17 3:39:42 AM
Comment:
Very good
Title: COUNT NOT WORKING PROPERLY   
Name: PRADEEPKUMAR1988
Date: 2010-09-25 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: 2010-07-16 10:11:42 AM
Comment:
Es lo que estaba buscando! Gracias!!!!
Title: shalu   
Name: shalu k s
Date: 2010-06-28 3:20:55 AM
Comment:
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
Comment:
Add the facility to create the table and fill its data...

Thanks
Title: questian about text editor   
Name: Rajani
Date: 2009-10-23 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: 2009-09-14 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: 2009-05-28 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: 2009-04-18 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: 2009-03-12 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: 2009-02-22 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: 2008-12-24 2:25:35 AM
Comment:
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
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: 2008-10-31 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: 2008-06-11 3:43:39 AM
Comment:
how are you?
good luck man
thats my friend mon
Title: error about editor   
Name: Ritu
Date: 2008-05-13 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: 2008-04-24 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: 2008-04-16 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: 2008-03-17 4:19:42 AM
Comment:
Very good!
thanks
Title: How to download free Html Editor for vb.net   
Name: RajaPriya
Date: 2008-03-06 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: 2008-02-14 1:50:32 PM
Comment:
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
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: 2008-02-04 10:44:33 PM
Comment:
where can we download this project
Title: Nice edito, but not working   
Name: May
Date: 2007-12-19 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: 2007-12-05 8:28:23 PM
Comment:
How can i download the code asp
Title: Nice TextBox   
Name: bala
Date: 2007-10-29 6:03:12 AM
Comment:
where is the download control?
Title: Cross Browser Editor!!   
Name: Haissam Abdul Malak
Date: 2007-10-02 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: 2007-08-28 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: 2007-08-28 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: 2007-08-23 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: 2007-08-16 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: 2007-08-16 8:08:30 AM
Comment:
where is the download link
Title: Need help for Rich Text box   
Name: Mahesh
Date: 2007-06-29 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: 2007-06-11 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: 2007-06-11 6:44:23 AM
Comment:
is this available for download
Title: Remove ONLY 'FontSize' ? Is it possible?   
Name: Kate
Date: 2007-06-07 3:42:03 AM
Comment:
ups.. forgot to enter my email.. :)
eka@saatec.ge
Title: Remove ONLY 'FontSize' ? Is it possible?   
Name: Kate
Date: 2007-06-07 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: 2007-06-05 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: 2007-05-29 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: 2007-05-25 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: 2007-05-15 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: 2007-05-01 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: 2007-05-01 4:00:52 AM
Comment:
Hi,
Is this avaiable for download
Title: Fantastic   
Name: Ahmad Murey
Date: 2007-04-15 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: 2007-03-22 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: 2007-03-21 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: 2007-03-20 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: 2007-02-26 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: 2007-02-23 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: 2007-02-23 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: 2007-02-22 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: 2007-02-16 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: 2007-02-15 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: 2007-02-14 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: 2007-01-09 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: 2007-01-09 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: 2007-01-08 6:42:54 AM
Comment:
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
Comment:
It's a good thing to study HtmlEditor
Title: Excellent   
Name: Shaho
Date: 2007-01-04 8:53:41 PM
Comment:
Excellent ! Please keep it up.
Title: Editor Download   
Name: Haissam Abdul Malak
Date: 2007-01-04 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: 2007-01-04 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-2019 ASPAlliance.com  |  Page Processed at 2019-09-15 6:43:18 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search