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.
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
These three files are necessary to add the control.
Steps to Add the Control:
- Add the HtmlEditUtility.js in
- Then in the area from where you want the control to be visible, you need
ShowCM() with two parameters, one
is the result textbox and the other is the title to be displayed.
<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
- 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
Bottom properties for fixing them in
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)
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
which allows us to execute commands on the
Iframe. Specify the
Iframe name there.
We can execute the
Iframe with commands like
Like this, there are a set of many commands.
Execute them like this:
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:
alert("Formatting happens only in Normal mode");
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
- Second one is, executing all the contents by using the
- 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!