Yahoo邮件和Hotmail像富文本编辑器 !

分享于 

10分钟阅读

Web开发

  繁體
<--链接到源文件下载 --> !<--文章图像 --> !

Sample Image - richtext.gif

<--将你的HTML其余部分添加到 --> !

介绍

一个朋友问我一个有趣的问题与一个富文本编辑器控件,使用 JavaScript。 开始,我觉得在回答他之前有一些研究。 我知道这很难回答,但我认为有一些方法可以解决它。 经过长时间的冲浪,找到了 IE的小秘密特性,称为"scriptlet"。

Scriptlet

对于许多网络程序员而言,Scriptlet仍然是一个谜。 虽然这个特性是在 IE 4.0中引入的,但从未使用过。 我认为它是由于交叉兼容性问题,因为Netscape不支持它但不要担心to已经提交了 to。

让我向你介绍一些Scriptlet示例。 很可能你用了一年的时间在雅虎里使用一个富文本撰写框 ! 邮件或者tweet和一些对内部有点迷惑的人,可能会通过每个标签来知道这是什么? 。除了 <的东西什么都没有。 > 标记,通常用于调用 com。 我曾经见过很多程序员认为雅虎 ! 或者hotmail组合框作为 com/ActiveX ! 实际上它看起来像。当它首先加载但实际上并不是你想象的那样。

实际上Scriptlet是ActiveX脚本。 这里组件由纯文本脚本代码而不是二进制代码组成。 它只不过是一个带有主体和一些脚本代码的HTML文件。 它只是一个HTML文件,可以嵌套 inside 另一个HTML页面,使用服务器端脚本对文件进行 include(...)。

执行Scriptlet的方式与applet或者ActiveX类似。 ActiveX和Scriplet都公开属性。事件和方法,也可以通过自动化驱动。 如果你用你的网络项目尝试一次,你会发现这些工具的重要性。 总的来说,我更喜欢把它放在"易于采用"类别中。 它是唯一一个已知的,最酷的解决DHTML代码重用问题的工具。 记住它包含在同一个对象标记中,我们用来调用ActiveX组件。

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

但是,标准ActiveX控件和scriptlet之间存在许多基本区别

  • 它由 NAME 标识,而不是用长的128位 CLSID。
  • 它直接从服务器调用,而不是从客户端计算机调用。 因这里,在使用它的各种方法之前,不需要编译 register 和你的ActiveX DLL组件。

下面是一个演示scriptlet实际用法的简单示例。 示例显示一个简单的非工具栏富文本编辑器。

在我们进入示例之前,让我们先看一下基于Web的富文本编辑器的一些基本内容。 在我们的示例中,IFRAME ( 内嵌框架) 接口作为编辑器。

IFRAME

IE ( 3或者更高版本) 引入了浮动框架的概念。 除了标准的HTML文档中的任何地方,这些都很像标准框架。 浮动框架必须包含在

<iframe>.. .
 </iframe>
元素。像这样。
<iframeclass="mytext"width="100%"ID="mytext"height="200"></iframe>

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

在文档中包含 <iframe..> 时,你不能输入或者键入任何你想要的内容。 要使它工作,你需要设置 designMode="On" 例如。

myiframe.document.designMode="On";

要开始写 IFRAME,你必须调用 openwrite 并正确关闭。 这样。

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

IFRAME 中有 40个以上的方法和几个属性。 有关更多信息,你可以在 访问。

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
和宽度等。

IFRAME方法

我们在示例中使用了几个方法。 包含:execCommandgetAttributeinsertAdjacentHTMLinsertAdjacentTextremoveAttributescrollIntoViewsetAttribute,焦点等。

execCommand

将给定命令设置为文本。 比如 bolditalicunderlinejustifyleftjustifycenterjustifyright 等等 等

myiframe.document.execCommand("bold");
包含

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

万用表

检索指定属性的值。

insertAdjacentHTML

将给定的HTML文本插入到位置的元素中。

scrollIntoView

使对象滚动到视图中,使它的在窗口的顶部或者底部对齐。

removeAttribute

从对象中移除给定的属性。

setAttribute

设置指定属性的值。

聚焦

元素接收焦点并执行由该元素指定的代码。

onfocus
事件。

示例:查看Scriptlet的实际示例。 这里文件( main.htm ) 在它的<对象中包含" richtext.htm"。 > 标记。文件:main.htm

<html><head></head><body><h2>I am main page that execute scriptlet</h2><objecttype="text/x-scriptlet"data="richtext.htm"></object></body></html>
让我们使用一些重要的方法,开发我们自己的富文本编辑器。
<!-- File:"richtext.htm" --><html><head></head><body><form><inputtype=checkbox name=source value=1 OnClick="SourceCode(source.checked)">Source
 <inputtype=checkbox name=bold value=1 OnClick="RichtText('Bold')"><b>B</b><inputtype=checkbox name=under value=1 OnClick="RichtText('underline')"><u>U</u><inputtype=checkbox name=italic value=1 OnClick="RichtText('italic')"><i>I</i><selectname=align OnChange="RichAlign(this[this.selectedIndex].value)"><optionvalue="justifyleft"selected>Left</option><optionvalue="justifycenter">Center</option><optionvalue="justifyright">Right</option></select><iframeclass="mytext"width="100%"ID="mytext"height="200"></iframe><scriptlangauge="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=falsevar pureText=truevar 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. 不是很酷?

F.A.Q

如何将iframe中的文本提交到其他页?

"lay response响应如下。
不能作为表单对象读取 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}

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

请参见 below。你必须更改 var bodyTag 或者 mytext.document.write(..)。 就是这样!

var bLoad=falsevar pureText=true/** Default value here **/var bodyTag="<body MONOSPACE bgcolor=green" +
 "STYLE="font:10pt arial,sans-serif">My Text is here"var bTextMode=falsemytext.document.open();
mytext.document.write(bodyTag);
mytext.document.close();
mytext.document.designMode="On";

结束语

我希望你发现了这篇文章。 这个特性非常容易使用,特别是DHTML代码重用性。 作为一个ActiveX脚本,它可以解决几个问题。 为了演示,我尝试了富文本编辑器。 我鼓励大家尝试并给我一些意见。


文本  TEX  EDI  mail  文本编辑器  Yahoo  
相关文章