Click here to Skip to main content
Click here to Skip to main content

JavaScript Control Text Design Templates for ASP.NET

, 4 Aug 2004
Rate this:
Please Sign up or sign in to vote.
Web design template allows user to type text with all styles, pictures, links, bulletted text, color etc.., for ASP.NET.
Prize winner in Competition "ASP.NET May 2004"

Introduction

This control is used in master driven template web pages.

Say if you want to create a mail box and allow user to create a page to compose with rich text editor, you can use this component which allows you to have all sorts of formatted text like Colored, Bold, Italicized, Indented, ....... you can even have the Links and pictures added.

You also can view the HTML part of the text being added in the control.

Getting In

Before getting in to the part -- coding the control, I would like to explain how to add the control in the web page. For that, the dependencies of the controls are:

  • HtmlEditUtility.js
  • index.htm
  • colorpanel.htm

These three files are necessary to add the control.

Steps to Add the Control:

  • Add the HtmlEditUtility.js in script block.
    <SCRIPT language="javascript" src="HtmlEditUtility.js"></SCRIPT>
  • Then in the area from where you want the control to be visible, you need to call the JavaScript method ShowCM() with two parameters, one is the result textbox and the other is the title to be displayed.

    Example:

    <asp:textbox id="t1" textmode="multiline" 
           name = "t1" runat = "server/">
     <img src="show.jpg" onclick = "ShowCM(t1,'Sample')">

    Here, you can see the ShowCm method. That is, here t1 is the text box where the resultant edited text of the control will fall, and if you write something in the textbox and click on the image, it will populate the control with the text you typed in t1.

  • Make sure you copy the control's HTML which is available in the download, and copy it in the page where you wanted to display. If you want them in any particular position, specify the style Z-Index, Top, and Bottom properties for fixing them in specified areas.

    Like:

    style="DISPLAY: none; Z-INDEX: 101; 
        LEFT: 235px; POSITION: absolute; TOP: 258px"

    This displays it at the top of all the controls, in the (235,258) position.

With this, the control is ready for you to work.

Now, we can move to the actual stuff, creating the Control:

I had used a IFrame for this process and set its design mode ON, so that it allows us to type in the web page (index.htm). I think now you can understand why we used index.htm. Same way the colorpanel.htm is used to pick the color from the table and fill in to the selected text.

We have a method execCommand().

Iframe.document.execCommand();

which allows us to execute commands on the Iframe. Specify the Iframe name there.

We can execute the Iframe with commands like CreateLink, InsertImage, ForeColor.... Like this, there are a set of many commands.

Execute them like this:

NewsBody_rich.document.execCommand("InsertImage","TextEdit.jpg");

Here, the NewsBody_rich is the Iframe and the InsertImage is the command that inserts the image in the Iframe, and the image is TextEdit.jpg.

The function in the HtmlEditUtility.js that does the trick is:

function cmdExec(cmd,opt) 
{
  if (isHTMLMode)
  {
    alert("Formatting happens only in Normal mode");
    return;
  }
  NewsBody_rich.focus();
  NewsBody_rich.document.execCommand(cmd,"",opt);
  NewsBody_rich.focus();
}

This is the function that makes every thing happen.

For Spell Check you need to do the Following

In Internet Options security Settings --> Custom Level --> Initialize and Script controls not Marked as safe --> enable

actually this uses the Word applications as the default spell checker so u need to do some macro settings there that is

Tools --> options --> security--> macro security --> Medium Level

this will do the rest for the spell checker to work.

The main logic used here is:

  • First is, as the design mode of iframe is turned on, we are typing the text and all formats in the inner text of the iframe.
  • Second one is, executing all the contents by using the execCommand method in JavaScript.
  • Third and final is, retrieving the InnerText of the Iframe. This is the trick used to accomplish the task.

Now, the code and the control is ready for use!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

R. Senthil Kumaran
Architect Tesco HSC
India India
Am a C#.Net, ASP.Net, SQL Server Professional
Intrested in Music, Cricket, and exploring new ideas...

Comments and Discussions

 
Generaldidn't get more.jpeg Pinmembervenkatreddy.s5-Jun-07 23:57 
QuestionHow to set the content in the iframe. Pinmemberqqwwrr24-Oct-06 19:11 
QuestionHow to adjust the paragraph spacing Pinmemberdolls2-Dec-05 23:11 
AnswerRe: How to adjust the paragraph spacing PinmemberDMalave23-Aug-06 5:11 
QuestionImage not found? PinmemberDennis McMahon2-Oct-05 4:57 
AnswerRe: Image not found? PinmemberR. Senthil Kumaran14-Oct-05 23:48 
AnswerRe: Image not found? PinmemberR. Senthil Kumaran14-Oct-05 23:50 
QuestionHow to Insert a Table option in this RichText box. PinsussAnonymous23-Sep-05 0:24 
GeneralRich text Box PinsussAnonymous23-Sep-05 0:22 
GeneralQuick Question Pinmemberjordan123418-Apr-05 7:24 
GeneralRe: Quick Question PinmemberR. Senthil Kumaran21-Apr-05 18:41 
GeneralIframe Pinsussvenkat_raman_L24-Feb-05 0:41 
QuestionHow to get the formated text value PinmemberNenita29-Oct-04 14:22 
AnswerRe: How to get the formated text value PinmemberR. Senthil Kumaran31-Oct-04 17:27 
GeneralRe: How to get the formated text value PinmemberNenita1-Nov-04 2:20 
GeneralRe: How to get the formated text value PinmemberR. Senthil Kumaran1-Nov-04 16:28 
GeneralRe: How to get the formated text value Pinmembernseresha2-Nov-04 19:53 
GeneralRe: How to get the formated text value PinmemberR. Senthil Kumaran2-Nov-04 20:05 
GeneralRe: How to get the formated text value Pinmembernseresha3-Nov-04 0:50 
GeneralRe: How to get the formated text value PinmemberR. Senthil Kumaran3-Nov-04 16:17 
GeneralSpellCheck does not work Pinmemberatrancostar27-Jul-04 12:35 
GeneralRe: SpellCheck does not work PinmemberR. Senthil Kumaran29-Jul-04 22:15 
GeneralRe: SpellCheck does not work Pinmembervenguboy16-Feb-06 17:55 
GeneralRe: SpellCheck does not work PinmemberR. Senthil Kumaran30-Jul-04 0:00 
GeneralRe: SpellCheck does not work Pinmembernarendra.kumar6-Apr-06 15:26 
GeneralTo the Author PinmemberGeorgeMar23-Jun-04 0:40 
GeneralRe: GeorgeMar PinmemberR. Senthil Kumaran24-Jun-04 21:50 
GeneralRe: GeorgeMar PinsussAnonymous29-Jul-04 11:53 
GeneralRe: GeorgeMar Pinmemberattackweasel6-Aug-04 3:29 
GeneralRe: GeorgeMar PinmemberR. Senthil Kumaran6-Aug-04 19:31 
GeneralRe: GeorgeMar Pinmembercanofunk13-Aug-04 9:58 
GeneralRe: GeorgeMar PinsussAndrei P.25-Apr-05 8:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140821.2 | Last Updated 5 Aug 2004
Article Copyright 2004 by R. Senthil Kumaran
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid