Click here to Skip to main content
12,452,344 members (54,246 online)
Click here to Skip to main content
Add your own
alternative version

Stats

119.1K views
2.1K downloads
48 bookmarked
Posted

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.

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...

You may also be interested in...

Pro
Pro

Comments and Discussions

 
Generaldidn't get more.jpeg Pin
venkatreddy.s5-Jun-07 23:57
membervenkatreddy.s5-Jun-07 23:57 
QuestionHow to set the content in the iframe. Pin
qqwwrr24-Oct-06 19:11
memberqqwwrr24-Oct-06 19:11 
QuestionHow to adjust the paragraph spacing Pin
dolls2-Dec-05 23:11
memberdolls2-Dec-05 23:11 
AnswerRe: How to adjust the paragraph spacing Pin
DMalave23-Aug-06 5:11
memberDMalave23-Aug-06 5:11 
QuestionImage not found? Pin
Dennis McMahon2-Oct-05 4:57
memberDennis McMahon2-Oct-05 4:57 
AnswerRe: Image not found? Pin
R. Senthil Kumaran14-Oct-05 23:48
memberR. Senthil Kumaran14-Oct-05 23:48 
AnswerRe: Image not found? Pin
R. Senthil Kumaran14-Oct-05 23:50
memberR. Senthil Kumaran14-Oct-05 23:50 
QuestionHow to Insert a Table option in this RichText box. Pin
Anonymous23-Sep-05 0:24
sussAnonymous23-Sep-05 0:24 
GeneralRich text Box Pin
Anonymous23-Sep-05 0:22
sussAnonymous23-Sep-05 0:22 
GeneralQuick Question Pin
jordan123418-Apr-05 7:24
memberjordan123418-Apr-05 7:24 
GeneralRe: Quick Question Pin
R. Senthil Kumaran21-Apr-05 18:41
memberR. Senthil Kumaran21-Apr-05 18:41 
GeneralIframe Pin
venkat_raman_L24-Feb-05 0:41
sussvenkat_raman_L24-Feb-05 0:41 
QuestionHow to get the formated text value Pin
Nenita29-Oct-04 14:22
memberNenita29-Oct-04 14:22 
AnswerRe: How to get the formated text value Pin
R. Senthil Kumaran31-Oct-04 17:27
memberR. Senthil Kumaran31-Oct-04 17:27 
GeneralRe: How to get the formated text value Pin
Nenita1-Nov-04 2:20
memberNenita1-Nov-04 2:20 
GeneralRe: How to get the formated text value Pin
R. Senthil Kumaran1-Nov-04 16:28
memberR. Senthil Kumaran1-Nov-04 16:28 
GeneralRe: How to get the formated text value Pin
nseresha2-Nov-04 19:53
membernseresha2-Nov-04 19:53 
GeneralRe: How to get the formated text value Pin
R. Senthil Kumaran2-Nov-04 20:05
memberR. Senthil Kumaran2-Nov-04 20:05 
GeneralRe: How to get the formated text value Pin
nseresha3-Nov-04 0:50
membernseresha3-Nov-04 0:50 
GeneralRe: How to get the formated text value Pin
R. Senthil Kumaran3-Nov-04 16:17
memberR. Senthil Kumaran3-Nov-04 16:17 
GeneralSpellCheck does not work Pin
atrancostar27-Jul-04 12:35
memberatrancostar27-Jul-04 12:35 
GeneralRe: SpellCheck does not work Pin
R. Senthil Kumaran29-Jul-04 22:15
memberR. Senthil Kumaran29-Jul-04 22:15 
GeneralRe: SpellCheck does not work Pin
venguboy16-Feb-06 17:55
membervenguboy16-Feb-06 17:55 
GeneralRe: SpellCheck does not work Pin
R. Senthil Kumaran30-Jul-04 0:00
memberR. Senthil Kumaran30-Jul-04 0:00 
GeneralRe: SpellCheck does not work Pin
narendra.kumar6-Apr-06 15:26
membernarendra.kumar6-Apr-06 15:26 
GeneralTo the Author Pin
GeorgeMar23-Jun-04 0:40
memberGeorgeMar23-Jun-04 0:40 
GeneralRe: GeorgeMar Pin
R. Senthil Kumaran24-Jun-04 21:50
memberR. Senthil Kumaran24-Jun-04 21:50 
GeneralRe: GeorgeMar Pin
Anonymous29-Jul-04 11:53
sussAnonymous29-Jul-04 11:53 
GeneralRe: GeorgeMar Pin
attackweasel6-Aug-04 3:29
memberattackweasel6-Aug-04 3:29 
GeneralRe: GeorgeMar Pin
R. Senthil Kumaran6-Aug-04 19:31
memberR. Senthil Kumaran6-Aug-04 19:31 
GeneralRe: GeorgeMar Pin
canofunk13-Aug-04 9:58
membercanofunk13-Aug-04 9:58 
GeneralRe: GeorgeMar Pin
Andrei P.25-Apr-05 8:49
sussAndrei P.25-Apr-05 8:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web01 | 2.8.160826.1 | Last Updated 5 Aug 2004
Article Copyright 2004 by R. Senthil Kumaran
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid