Yahoo! mail and Hotmail like Rich Text Editor

• Download source files - 9.48 Kb

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.