65.9K
CodeProject 正在变化。 阅读更多。
Home

类似于 Yahoo! 邮件和 Hotmail 的富文本编辑器

Sarose "npguy"
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.60/5 (64投票s)

2001 年 2 月 4 日

viewsIcon

666602

downloadIcon

6948

使用 Scriptlets 实现的类似 Yahoo! 邮件和 Hotmail 的富文本编辑器。

Sample Image - richtext.gif

引言

一位朋友就使用 JavaScript 的富文本编辑器控件提出了一个有趣的问题。起初，我觉得需要做一些研究才能回答。我知道这很难回答，但认为总会有解决办法。经过长时间的搜索，幸运的是，我发现了一个 IE 的小秘密功能，称为“scriptlet”。

Scriptlet

对于许多 Web 程序员来说，Scriptlet 仍然是个谜。尽管此功能在 IE 4.0 中就已推出，但从未被广泛使用。我认为这是由于跨平台兼容性问题，因为 Netscape 不支持它，但别担心，Microsoft 早已将 Scriptlet 提交给了 W3。

让我通过几个例子来介绍 Scriptlet。也许一年来你一直在 Yahoo! 邮件或 Hotmail 中使用富文本撰写框，那些对内部结构有点好奇的人，可能已经浏览了所有标签，想知道这到底是什么？……但除了通常用于调用 COM 的 <object ..> 标签之外，什么也没找到。我看到很多程序员习惯性地将 Yahoo! 或 Hotmail 的撰写框视为 COM / ActiveX！。实际上，它在首次加载时看起来确实像 COM，但实际上并非你所想的那样。

实际上，Scriptlet 是 ActiveX 脚本。这些组件由纯文本脚本代码组成，而不是二进制代码。它只不过是一个带有 body 和一些脚本代码的 HTML 文件。它只是一个 HTML 文件，可以像使用服务器端脚本包含文件一样嵌套在另一个 HTML 页面中。

执行 Scriptlet 的方式类似于 Applet 或 ActiveX。ActiveX 和 Scriptlet 都公开属性、事件和方法，并且还可以通过自动化进行驱动。好吧，如果你在 Web 项目中尝试一次，你就会发现这类工具的重要性。总的来说，我倾向于将其归类为“易于采用”的工具。它是唯一一种已知可用于 DHTML 代码重用的最酷的解决方案。请记住，它包含在用于调用 ActiveX 组件的同一个 object 标签中。

<object type="text/x-scriptlet"
data= "Scriptlet.html"></object>

但是，标准的 ActiveX 控件和 Scriptlet 之间存在许多基本差异

  • 它由名称标识，而不是由长 128 位 CLSID 标识。
  • 它直接从服务器调用，而不是从客户端 PC 调用。因此，无需像使用 ActiveX DLL 组件之前那样进行编译、注册，就可以从网页使用其各种方法和属性。

这是一个非常简单的示例，演示了 scriptlet 的实际用法。该示例显示了一个简单的无工具栏富文本编辑器。

在我们深入示例之前，让我们先阅读一些关于基于 Web 的富文本编辑器的基本内容。在我们的示例中，IFRAME（内联框架）被用作编辑器。

IFRAME

IE（3 或更高版本）引入了浮动框架的概念。它们与标准框架非常相似，但它们可以位于标准 HTML 文档中的任何位置。浮动框架必须包含在 <iframe> ... </iframe> 元素中。像这样。

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

文档中的每个 IFRAME 元素都是一个可以通过脚本进行操作的对象。通过使用 IFRAME 对象的几个方法和属性，我们可以做任何我们想做的事情。

刚开始在文档中包含 <iframe..> 时，您无法输入任何内容。要使其正常工作，您需要设置 designMode 为 "On"，例如。

myiframe.document.designMode="On";

要开始在 IFRAME 中编写，您必须正确调用 open、write 和 close。像这样。

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

IFRAME 有 40 多个方法和几个属性。有关更多信息，您可以访问 Microsoft。

IFRAME 属性

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 和 width 等。

IFRAME 方法

我们正在查看在我们的示例中使用的一些方法。execCommand、contains、getAttribute、insertAdjacentHTML、insertAdjacentText、removeAttribute、scrollIntoView 和 setAttribute、focus 等。

execCommand

将给定命令应用于文本。例如 bold、italic、underline、justifyleft、justifycenter、justifyright 等，如下所示。

myiframe.document.execCommand("bold");

contains

检查给定元素是否包含在该对象内。

getAttribute

检索指定属性的值。

insertAdjacentHTML

在指定位置将给定的 HTML 文本插入元素。

scrollIntoView

使对象滚动到视图中，并将其对齐在窗口的顶部或底部。

removeAttribute

从此对象中删除给定属性。

setAttribute

设置指定属性的值。

focus

使元素获得焦点并执行 onfocus 事件指定的代码。

示例 是时候看看 Scriptlet 的实际示例了。此文件 (main.htm) 在其 <object..> 标签中包含 "richtext.htm"。文件：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>
让我们使用一些重要的方法来开发自己的富文本编辑器。
<!-- 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>

打开 main.htm。是不是很酷？

常见问题解答

如何将 iframe 中的文本提交到另一个页面？

"d-lay" 的回答如下：
无法将 IFrame 读取为表单对象，但是您可以使用 JavaScript 将 IFrame 中的文本复制到表单中的隐藏字段，然后提交。

这是我添加的允许您执行此操作的函数

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
}

想知道如何将默认值或字符串放入文本框？

看下面。您需要更改 var bodyTag 或 mytext.document.write(..)。就是这样！

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

结论

我希望您觉得这篇文章很有趣。此功能非常易于使用，尤其适用于 DHTML 代码重用。作为 ActiveX 脚本，它可以解决许多问题。作为演示，我尝试了富文本编辑器。我鼓励每个人都试一试，并给我一些反馈。

© . All rights reserved.