Click here to Skip to main content
13,453,778 members (43,879 online)
Click here to Skip to main content
Add your own
alternative version


120 bookmarked
Posted 3 Feb 2001

Yahoo! mail and Hotmail like Rich Text Editor

, 28 Feb 2002
Rate this:
Please Sign up or sign in to vote.
Yahoo! mail and Hotmail like Rich Text Editor using Scriptlets
<!-- Link to source file download --> <!-- Article image -->

Sample Image - richtext.gif

<!-- Add the rest of your HTML here -->


A friend asked me an interesting question related with a Rich Text Editor Control using JavaScript . At first, I felt to have some study before I answer him. I knew this is tough to answer but thought there is some ways to get solve it. After a long surfing fortunately, found a small secret features of IE known as "scriptlet".


For many web programmers Scriptlet is still a mystery. Although this features was introduced in IE 4.0 and never used highly. I think its due to cross-compatibility issue because Netscape doesn't support it but don't worry Microsoft has submitted Scriptlet to W3 long ago.

Let me introduce Scriptlet with some few examples. Probably from a year long you are using a rich text compose box in Yahoo! mail or hotmail and someone who are little crazy about internal, probably gone through every tags to know what exactly is this? ... but got nothing except <object ..> tag that is usually use to invoke COM . I have seen lots of programmer used to consider the yahoo! or hotmail compose box as COM /ActiveX ! . Indeed it looks like COM when it loads first but actually its not that what you think.

Actually Scriptlet is ActiveX script. This components consisting of Plain text script code instead of binary. It is nothing more than an HTML file with a body and some script code. It is simply a HTML file that can be nested inside another HTML page like you use to include(...) a file using server side scripts.

The way of executing the Scriptlet is similar to applet or ActiveX. Both ActiveX and Scriplet expose properties, events and methods and also can driven via automation. Well, If you try it once with your web projects, you will find the importance of such tools. Overall I prefer to put it in "easy to adopt" categories. It is the only one tool known to be the coolest solution for DHTML code reusability. Remember It is included in same object tag where we use to invoke ActiveX components.

<object type="text/x-scriptlet"

data= "Scriptlet.html"></object>

But There are a number of fundamental differences between a standard ActiveX control and a scriptlet

  • It is identified by name, not with an long 128-bit CLSID.
  • It is invoked direct from the server not from the client PC. So no need to compile, register like you do with your ActiveX DLL components before using its various methods, properties from the Web pages.

Here is a very simple example that demonstrate the real usage of scriptlet. The example shows a simple non-toolbar Rich Text Editor.

Before we get inside the example lets read few essential stuffs behind a Web Based Rich Text Editor. In our example IFRAME (Inline Frame) is interfaced as Editor.


IE (3 or later) has introduced the concept of floating frames. These are much like standard frames, except they can be anywhere within a standard HTML document. A floating frame must be enclosed within

<iframe> ...
elements. like this.

<iframe class="mytext" width="100%" ID="mytext" height="200">

Every IFRAME element in a document is an object that can be manipulated through scripting. By using the several methods and properties of IFRAME object we can do anything we like.

At frist when u including <iframe..> in the document you can't input or type anything you want. To make it work you need to set the designMode="On" for example.


To start writing in IFRAME you have to call open,write and close properly. like this.;

There are more than 40 methods and several properties in IFRAME. For more information you can visit at Microsoft.

IFRAME Properties

className, document, id, innerHTML, innerText, isTextEdit, lang, language,
offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML,
outerText, parentElement, parentTextEdit, sourceIndex, style, tagName, title,
align, border, borderColor, dataFld, dataSrc, frameBorder, height, hspace,
scrolling, src, vspace
and width. etc.

IFRAME Methods

We are looking at few methods that is used in our examples. execCommand, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute, focus etc.


Sets the given command to the text. Like bold, italic, underline, justifyleft, justifycenter, justifyright etc. like



Checks whether the given element is contained within the object.


Retrieves the value of the specified attribute.


Inserts the given HTML text into the element at the location.


Causes the object to scroll into view, aligning it either at the top or bottom of the window.


Removes the given attribute from the object.


Sets the value of the specified attribute.


Causes the element to receive the focus and executes the code specified by the


Example Time to see the real example of Scriptlet. This file (main.htm) includes "richtext.htm" in its <object..> tag. File: main.htm

<h2>I am main page that execute scriptlet</h2>
<object type="text/x-scriptlet" data= "richtext.htm"></object>
Lets use some important method and develop our own Rich text editor.
<!-- File: "richtext.htm" -->

    <input type=checkbox name=source value=1 OnClick="SourceCode(source.checked)">Source
    <input type=checkbox name=bold value=1 OnClick="RichtText('Bold')"><b>B</b>
    <input type=checkbox name=under value=1 OnClick="RichtText('underline')"><u>U</u>
    <input type=checkbox name=italic value=1 OnClick="RichtText('italic')"><i>I</i>

    <select name=align OnChange="RichAlign(this[this.selectedIndex].value)">
        <option value="justifyleft" selected>Left</option>
        <option value="justifycenter">Center</option>
        <option value="justifyright">Right</option>
    <iframe class="mytext" width="100%" ID="mytext" height="200">
    <script langauge="JavaScript">
        function RichtText(what) {

        function RichAlign(what) {

        function SourceCode(mode)
            var htmtext;
            if(mode) {
            else {


        var bLoad=false
        var pureText=true
        var bodyTag="<body MONOSPACE STYLE=\"font:10pt arial,sans-serif\">"
        var bTextMode=false;


open main.htm. Isn't it cool?


How to submit the text in the iframe to another page?

"d-lay" response is as follow.
It isn't possible to read from the IFrame as a form object, however you can use javascript to copy the text from the IFrame into a hidden field in your form and then submit.

Here's the function I added to allow you to do this

function savedocument() { // added 16-02-02 "D-Lay!" <> 
  if (!isRTextMode()) return;
  setMode(1); //switch doc to html mode for save
  setMode(0); //switch doc back to text mode
  document.saveform.submit(); // submit form for save

Wondering how can i put a default value or string into the text box?

See below. You have to change either var bodyTag or mytext.document.write(..). That's it!

var bLoad=false
var pureText=true

/** Default value here **/
var bodyTag="<body MONOSPACE bgcolor=green " +
            "STYLE=\"font:10pt arial,sans-serif\">My Text is here"

var bTextMode=false;


I hope you've found this article interesting. This features is remarkably easy to use especially for DHTML code reusability. Being an ActiveX script, It can solve several problems. For demonstration, I tried Rich Text Editor. I encourage everyone to try it and send me some comments.


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


About the Author

Sarose "npguy"
Web Developer
India India
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralHelp!!! Pin
aliwebdev30-Nov-08 1:16
memberaliwebdev30-Nov-08 1:16 
GeneralNot able to edit on pop-up window [modified] Pin
Kambham18-Aug-08 3:07
memberKambham18-Aug-08 3:07 
Generalthanks Pin
jomet10-Mar-08 23:01
memberjomet10-Mar-08 23:01 
Questioncan i used this in window application Pin
m_salman26-Sep-07 19:19
memberm_salman26-Sep-07 19:19 
Generalpls help Pin
Asha Asra11-Jun-07 1:54
memberAsha Asra11-Jun-07 1:54 
QuestionUnable to open hyperlink Pin
sanju_dotNET24-May-07 23:36
membersanju_dotNET24-May-07 23:36 
Questionthe toolbar showing Blank Pin
rbama15-May-07 22:13
memberrbama15-May-07 22:13 
GeneralCross browser rich text editor Pin
Michiel van Eerd10-May-07 0:06
memberMichiel van Eerd10-May-07 0:06 
GeneralMozilla Plug-in Problem Pin
simbako7-Feb-07 20:00
membersimbako7-Feb-07 20:00 
Generalproblem with Firefox Pin
pippobuado5122-Jan-07 2:10
memberpippobuado5122-Jan-07 2:10 
GeneralProblem with Mozilla Pin
Somnath_Mali17-Jul-06 2:24
memberSomnath_Mali17-Jul-06 2:24 
GeneralRe: Problem with Mozilla Pin
Ali Cinar29-Dec-06 0:26
memberAli Cinar29-Dec-06 0:26 
GeneralIssues with the Code Pin
evipin11-Jul-06 2:20
memberevipin11-Jul-06 2:20 
Questiongreek characters Pin
beamag10-Jul-06 23:07
memberbeamag10-Jul-06 23:07 
GeneralIn todo List Pin
gchz16-Jun-06 6:15
membergchz16-Jun-06 6:15 
GeneralColour s are not displaying Pin
idreesbadshah3-Mar-06 4:32
memberidreesbadshah3-Mar-06 4:32 
GeneralRe: Colour s are not displaying Pin
Jamal Khan29-Mar-06 19:46
memberJamal Khan29-Mar-06 19:46 
GeneralRe: Colour s are not displaying Pin
Suneetha32128-Feb-07 23:58
memberSuneetha32128-Feb-07 23:58 
Generalnice article Pin
Sangwoo Im8-Jan-06 10:06
memberSangwoo Im8-Jan-06 10:06 
GeneralRe: nice article Pin
jamesabarrow28-Jun-07 0:48
memberjamesabarrow28-Jun-07 0:48 
QuestionHow can I get the text value at local? Pin
Anonymous23-Oct-05 17:14
sussAnonymous23-Oct-05 17:14 
AnswerRe: How can I get the text value at local? Pin
Sinyaliu1-Nov-06 4:00
memberSinyaliu1-Nov-06 4:00 
Generalmulticast ftp code in java Pin
ab3li22-Jun-05 0:18
memberab3li22-Jun-05 0:18 
GeneralMajor Upgrade to This Code Pin
whennessy639-Feb-05 16:39
memberwhennessy639-Feb-05 16:39 
GeneralHow to type text in Arabic script? Pin
simunaqv11-Feb-05 1:42
susssimunaqv11-Feb-05 1:42 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04-2016 | 2.8.180318.3 | Last Updated 1 Mar 2002
Article Copyright 2001 by Sarose "npguy"
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid