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.
<!---->
<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() {
if (!isRTextMode()) return;
setMode(1);
document.saveform.msg.value=mytext.document.body.innerText;
setMode(0);
document.saveform.submit();
}
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
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.
