Click here to Skip to main content
15,867,308 members
Articles / Programming Languages / Javascript
Article

Yahoo! mail and Hotmail like Rich Text Editor

Rate me:
Please Sign up or sign in to vote.
4.60/5 (67 votes)
28 Feb 2002 611.6K   6.9K   121   219
Yahoo! mail and Hotmail like Rich Text Editor using Scriptlets

Sample Image - richtext.gif

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.

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

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

JavaScript
myiframe.document.designMode="On";

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

JavaScript
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

JavaScript
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
<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.
HTML
<!-- 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

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

JavaScript
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


Written By
Web Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralHelp!!! Pin
aliwebdev30-Nov-08 1:16
aliwebdev30-Nov-08 1:16 
GeneralNot able to edit on pop-up window [modified] Pin
Kambham18-Aug-08 3:07
Kambham18-Aug-08 3:07 
Generalthanks Pin
jomet10-Mar-08 23:01
jomet10-Mar-08 23:01 
Questioncan i used this in window application Pin
salman kazi26-Sep-07 19:19
salman kazi26-Sep-07 19:19 
Generalpls help Pin
Asha Asra11-Jun-07 1:54
Asha Asra11-Jun-07 1:54 
QuestionUnable to open hyperlink Pin
sanju_dotNET24-May-07 23:36
sanju_dotNET24-May-07 23:36 
Questionthe toolbar showing Blank Pin
rbama15-May-07 22:13
rbama15-May-07 22:13 
GeneralCross browser rich text editor Pin
Michiel van Eerd10-May-07 0:06
Michiel van Eerd10-May-07 0:06 
GeneralMozilla Plug-in Problem Pin
simbako7-Feb-07 20:00
simbako7-Feb-07 20:00 
Generalproblem with Firefox Pin
genesi36022-Jan-07 2:10
genesi36022-Jan-07 2:10 
GeneralProblem with Mozilla Pin
Somnath_Mali17-Jul-06 2:24
Somnath_Mali17-Jul-06 2:24 
GeneralRe: Problem with Mozilla Pin
Ali Cinar29-Dec-06 0:26
Ali Cinar29-Dec-06 0:26 
GeneralIssues with the Code Pin
evipin11-Jul-06 2:20
evipin11-Jul-06 2:20 
Questiongreek characters Pin
beamag10-Jul-06 23:07
beamag10-Jul-06 23:07 
GeneralIn todo List Pin
gchz16-Jun-06 6:15
gchz16-Jun-06 6:15 
GeneralColour s are not displaying Pin
idreesbadshah3-Mar-06 4:32
idreesbadshah3-Mar-06 4:32 
GeneralRe: Colour s are not displaying Pin
Jamal Khan29-Mar-06 19:46
Jamal Khan29-Mar-06 19:46 
GeneralRe: Colour s are not displaying Pin
Suneetha32128-Feb-07 23:58
Suneetha32128-Feb-07 23:58 
Generalnice article Pin
Sangwoo Im8-Jan-06 10:06
Sangwoo Im8-Jan-06 10:06 
GeneralRe: nice article Pin
jamesabarrow28-Jun-07 0:48
jamesabarrow28-Jun-07 0:48 
QuestionHow can I get the text value at local? Pin
Anonymous23-Oct-05 17:14
Anonymous23-Oct-05 17:14 
AnswerRe: How can I get the text value at local? Pin
iJimmyLiu1-Nov-06 4:00
iJimmyLiu1-Nov-06 4:00 
Generalmulticast ftp code in java Pin
ab3li22-Jun-05 0:18
ab3li22-Jun-05 0:18 
GeneralMajor Upgrade to This Code Pin
whennessy639-Feb-05 16:39
whennessy639-Feb-05 16:39 
GeneralHow to type text in Arabic script? Pin
simunaqv11-Feb-05 1:42
simunaqv11-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.