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

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

Introduction

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

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.

IFRAME

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> ... </iframe> elements. like this.

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

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.

myiframe.document.designMode="On";

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

myiframe.document.open();
mytext.document.write("Test");
myiframe.document.close();

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.

execCommand

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

myiframe.document.execCommand("bold");

contains

Checks whether the given element is contained within the object.

getAttribute

Retrieves the value of the specified attribute.

insertAdjacentHTML

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

scrollIntoView

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

removeAttribute

Removes the given attribute from the object.

setAttribute

Sets the value of the specified attribute.

focus

Causes the element to receive the focus and executes the code specified by the onfocus event.

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


<html>
<head></head>
<body>
<h2>I am main page that execute scriptlet</h2>
<object type="text/x-scriptlet" data= "richtext.htm"></object>
</body>
</html>

Lets use some important method and develop our own Rich text editor.
<!-- File: "richtext.htm" -->

<html>
<head>
</head>
<body>
<form>
    <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>
    </select>
    
    <iframe class="mytext" width="100%" ID="mytext" height="200">
    </iframe>
    
    <script langauge="JavaScript">
        function RichtText(what) {
            mytext.document.execCommand(what);
            mytext.focus();
        }

        function RichAlign(what) {
            mytext.document.execCommand(what);
            mytext.focus();
        }

        function SourceCode(mode)
        {
            var htmtext;
            if(mode) {
                htmtext=mytext.document.body.innerHTML;
                mytext.document.body.innerText=htmtext;
            }
            else {
                htmtext=mytext.document.body.innerText;
                mytext.document.body.innerHTML=htmtext;
            }

        }    

        var bLoad=false
        var pureText=true
        var bodyTag="<body MONOSPACE STYLE=\"font:10pt arial,sans-serif\">"
        var bTextMode=false
        mytext.document.open();
        mytext.document.write(bodyTag);
        mytext.document.close();
        mytext.document.designMode="On";
    </script>
</form>

</body>
</html>

open main.htm. Isn't it cool?

F.A.Q

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!" <webmaster@7thportal.org> 
  if (!isRTextMode()) return;
  setMode(1); //switch doc to html mode for save
  document.saveform.msg.value=mytext.document.body.innerText;
  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
 mytext.document.open();
 mytext.document.write(bodyTag);
 mytext.document.close();
 mytext.document.designMode="On";

Conclusion

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.

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

Sarose "npguy"
Web Developer
India India
No Biography provided

Comments and Discussions

 
GeneralHelp!!! Pinmemberaliwebdev30-Nov-08 2:16 
Generalthanks Pinmemberjomet11-Mar-08 0:01 
Questioncan i used this in window application Pinmemberm_salman26-Sep-07 20:19 
Generalpls help PinmemberAsha Asra11-Jun-07 2:54 
QuestionUnable to open hyperlink Pinmembersanju_dotNET25-May-07 0:36 
Questionthe toolbar showing Blank Pinmemberrbama15-May-07 23:13 
GeneralCross browser rich text editor PinmemberMichiel van Eerd10-May-07 1:06 
GeneralMozilla Plug-in Problem Pinmembersimbako7-Feb-07 21:00 
Generalproblem with Firefox Pinmemberpippobuado5122-Jan-07 3:10 
GeneralProblem with Mozilla PinmemberSomnath_Mali17-Jul-06 3:24 
GeneralRe: Problem with Mozilla PinmemberAli Cinar29-Dec-06 1:26 
GeneralIssues with the Code Pinmemberevipin11-Jul-06 3:20 
Questiongreek characters Pinmemberbeamag11-Jul-06 0:07 
GeneralIn todo List Pinmembergchz16-Jun-06 7:15 
GeneralColour s are not displaying Pinmemberidreesbadshah3-Mar-06 5:32 
GeneralRe: Colour s are not displaying PinmemberJamal Khan29-Mar-06 20:46 
GeneralRe: Colour s are not displaying PinmemberSuneetha3211-Mar-07 0:58 
Generalnice article PinmemberSangwoo Im8-Jan-06 11:06 
GeneralRe: nice article Pinmemberjamesabarrow28-Jun-07 1:48 
QuestionHow can I get the text value at local? PinsussAnonymous23-Oct-05 18:14 
AnswerRe: How can I get the text value at local? PinmemberSinyaliu1-Nov-06 5:00 
Generalmulticast ftp code in java Pinmemberab3li22-Jun-05 1:18 
GeneralMajor Upgrade to This Code Pinmemberwhennessy639-Feb-05 17:39 
NPGuy,
 
I have used your code as the starting point to build a Rich Text Box control, but I've made major modifications:
 
1. I "genericized" all of the javascript to allow x-number of instances on a single page.
2. I inherit from Web.UI.Control so that control is available from the toolbar in VS.
3. I added numerous properties for hiding/showing toolbar features, etc.
4. I completed the color options.
5. I switched the divs to tables so that other styles wouldn't screw up the formatting of the buttons. (This is a major change)
6. I created additional stylesheets and button sets to allow several looks: Office2000, Office98, officeXP, or original
 
There are also a few other upgrades here and there.
 
I would like to post this as an article to CodeProject, with your permission or jointly with you if you'd like. Please let me know if you're interested. If I don't here from you by 2/16/2005, I'll assume you no longer monitor the board and post the article. I will, of course, give you full credit for the original code and article in my upgrade.
 
Thanks,
Bill Hennessy
GeneralHow to type text in Arabic script? Pinsusssimunaqv11-Feb-05 2:42 
GeneralHow to type text in Arabic script? Pinsusssimunaqv11-Feb-05 2:43 
GeneralRe: Major Upgrade to This Code PinmemberLeonel Corona22-May-05 19:09 
GeneralRe: Major Upgrade to This Code Pinmembersergiobotta27-Jun-06 9:29 
GeneralRe: Major Upgrade to This Code PinmemberHarlquinth_15-Oct-06 22:40 
Generalspecial characters PinsussAnonymous9-Feb-05 12:40 
GeneralRe: special characters PinsussAnonymous28-Apr-05 10:31 
GeneralDefault Value Problems... PinmemberCodeCamel26-Oct-04 5:04 
Generaltest PinsussAnonymous24-Jun-04 0:32 
Generalhey guys go to this page Pinsussdebutatsuo5-Apr-04 5:47 
GeneralAnother Nice One. PinsussAnonymous28-Jun-05 15:11 
GeneralFill defaultvalue in the edit-box Pinmemberjulius_elias22-Mar-04 3:29 
GeneralRe: Fill defaultvalue in the edit-box PinmemberBhushi29-Apr-05 0:10 
GeneralRe: Fill defaultvalue in the edit-box PinmemberBhushi29-Apr-05 0:26 
GeneralRe-loading big HTML text in editor doesn't show in box PinmemberAasimJilani24-Feb-04 5:21 
GeneralRe: Re-loading big HTML text in editor doesn't show in box Pinmembersergiobotta27-Jun-06 9:10 
GeneralThe real Hot Mail Editor PinmemberRuedi Gygli21-Jan-04 1:22 
GeneralI am very like this:) Pinmemberangel_girl29-Dec-03 23:21 
GeneralA Solution for Re-Loading Text into the Box PinsussJonathan Blake11-Dec-03 13:38 
GeneralUPDATE: A Solution for Re-Loading Text into the Box PinsussJonathan Blake11-Dec-03 13:49 
GeneralRe: UPDATE: A Solution for Re-Loading Text into the Box Pinmembersergiobotta27-Jun-06 5:47 
Generalhotmail compose skins PinsussUgly Gurl16-Aug-03 3:47 
GeneralIframe PinsussBill Moritz15-May-03 13:40 
GeneralRe: Iframe PinsussAnonymous12-May-05 9:21 
GeneralQuotes in default text PinmemberPaul Creedy11-May-03 6:40 
GeneralRe: Quotes in default text PinmemberMarkC#14-Nov-03 11:10 
GeneralRe: Quotes in default text PinsussAnonymous11-Dec-03 13:42 

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 | Terms of Use | Mobile
Web02 | 2.8.1411023.1 | Last Updated 1 Mar 2002
Article Copyright 2001 by Sarose "npguy"
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid