在 Internet Explorer 5.5 中创建可编辑的 Web 页
现在,您可以直接将 Microsoft(R) Internet Explorer 复杂的 HTML 编辑功能合并到 Web 页中!Microsoft 的 HTML 编辑器是对 Internet Explorer 中 HTML 分析和展现引擎的内置扩展。从 Internet Explorer 4.0 开始,MSHTML 编辑器已经为主机应用程序提供了开发基于 HTML 的文本编辑器和 Web 创作应用程序的 HTML 编辑平台。但是,在以前的版本中,只有当文档处在“设计”模式时,才能启用编辑器。使用 Internet Explorer 5.5,您可以将文档或文档中的单个元素声明为可以在运行时编辑,这就使得 Web 创作者能够完全支持浏览器内的 WYSIWYG(所见即所得)HTML 编辑权。
MSHTML 编辑器提供了简单而又功能强大的脚本编辑模式,该模式支持对文本和窗体的最常用的编辑功能。这样,就有可能开发出高级的联机编辑应用程序、创建允许用户输入格式化文本或图象等的统一窗体、或使 Web 站点上的页面成为每个用户都能用自己的内容对其定制。Web 创作者可能使用文本编辑功能来开发联机文本编辑器,或者使用窗体编辑功能来编写联机明信片应用程序。
下面的文本编辑功能已经在以前版本的 Internet Explorer 中得到支持,在 Internet Explorer 5.5 中同样支持这些功能。除键盘快捷键外(它们始终处于启用状态),所有这些功能都有可以在脚本中执行的对应命令。
- 文本格式:
- 字体(例如,Times Roman、Arial、Courier 等)
- 字体大小
- 文本样式和装饰(斜体、粗体、下划线、加删除线、上标、下标)
- 文本颜色
- 背景颜色
- 字体(例如,Times Roman、Arial、Courier 等)
- 段落格式:
- 缩进
- 伸出
- 左、右、居中以及页边对齐
- 文本方向(右到左,或左到右)
- 缩进
- 列表编辑:
- 带编号的列表
- 带项目符号的列表
- 嵌套到任何等级
- 带编号的列表
- 选定服务:
- 通过拖动鼠标选定范围
- 通过双击选定单词
- 通过三次单击选定段落
- 基于键盘的选定(Shift + 箭头、Home 和 End 键)
- 通过拖动鼠标选定范围
- 自动检测超级链接和书签(使它们可以导航)
- 无限等级的撤消和恢复
- 文本输入模式:
- 插入
- 改写
- 插入
- 支持标准键盘快捷键:
剪切 (Ctrl + X) | 复制 (Ctrl + C) | 粘贴 (Ctrl + V) |
粗体 (Ctrl + B) | 斜体 (Ctrl + I) | 下划线 (Ctrl + U) |
撤消 (Ctrl + Z) | 恢复 (Ctrl + Y) | 超级链接 (Ctrl + K) |
查找 (Ctrl + F) | 全选 (Ctrl + A) | 选定段落 (Ctrl + 单击左键) |
Internet Explorer 5.5 中的新功能
当然,Internet Explorer 5.5 中最棒的新编辑功能之一,就是能够在浏览器运行时启用编辑功能,但我们将在后面讨论它。现在我们讨论 Internet Explorer 5.5 中其它一些新的和经过改进的功能,尤其是文本编辑:
- 垂直文本编辑
- 双向编辑
- 批撤消和恢复
- 自动检测的撤消
- 在剪切、复制和粘贴操作中保持格式
- 在空行中保持格式
垂直编辑是 Internet Explorer 5.5 中首次出现的功能。该功能主要针对那些使用中文或日文进行编辑的用户,但它在纯 ASCII 文本中也能很好地工作。使用西文字体的字符可以向右旋转,这样,在显示文本时仿佛整段文本都被顺时针旋转。Internet Explorer 5.5 中,双向文本支持也得到极大改进。该功能主要用于希伯来和阿拉伯的文本。虽然经常会有一些英文的单词和词组,或者其他基于拉丁文的单词或词组,被插入到希伯来和阿拉伯的文本中。在 Internet Explorer 5.5 中,当遇到拉丁文字符集时,主要的定位方向将自动切换为从左到右,而当检测到希伯来文或阿拉伯文字符集时又会自动切换为从右到左。
批撤消和恢复使用户可以立刻删除和还原整个句子,而不是一次一个字符。现在,如果由于某些原因用户不想让某个链接处于活动状态,则可以使用 BACKSPACE 键撤消自动检测到的链接。
在复制和粘贴文本时,该编辑器现在可以很好地保持格式。例如,如果复制了格式为粗体、红色宋体格式的文本,然后将它粘贴到格式为粗体 Times Roman 的文本段中,那么所粘贴的文本将保持其粗体、红色宋体格式。现在,格式还能在空行上保持。如果将某行的格式设置为 16 点、斜体、Haettenschweiler,并数次点击 RETURN,当您返回这些空行并在其中键入字符时,文本将以 16 点、斜体、Haettenschweiler 格式输入,而不再是文档的默认字体。
Internet Explorer 中的 HTML 编辑器一贯支持下面这些基本的 Web 创作功能,未来仍将继续支持。
- 插入:
- 控件
- IFrames
- 图象
- 字幕
- 水平线
- 控件
- 控件选定
- UI 激活
控件、IFrames、图象、字幕、水平线和表格全都有一些共同之处。每个元素都有各自的布局。所谓具有布局,基本上表示着对象呈矩形。(实际上,只要为任何元素指定宽度和高度,或使它 contentEditable,就可以使它具有布局。)如果布局元素包含有内容,则其内容的布局是由界定其范围的矩形来决定。
可以与选择文本一样,按住鼠标左键并在其上拖动鼠标,就可以选定具有布局的元素。但是,当布局元素位于可编辑容器内部时,也可以通过单击或按 TAB 键对它进行控制选定。当元素被控制选定时,将在框定它的矩形角和每个边的中点上显示“抓取手柄”。当元素被控制选定时,可以将其作为单个单位拖动(或删除),连带它的所有内容。还可以用鼠标拖动它的抓取手柄来调整其大小。元素被控制选定时,单击它或点击 ENTER 键将使它成为被激活的 UI。当元素成为活动的 UI 时,(除非它是不能有内容的元素,如图象或水平线,)将在它的周围出现晕线边框,并且可以编辑它的内容。
Internet Explorer 5.5 中的新功能
Internet Explorer 5.5 拥有窗体编辑器的所有功能,此外,它还支持一些很棒的新功能,这些新功能使得创建窗体和 Web 页成为轻松并充满乐趣的工作。这些新功能包括:
- 2D 绝对定位
- 现场调整大小
- 多项选定
- 不可选定的 UI 元素
使用 2D 绝对定位,用户只需进行拖放操作,就可以把元素放到页面的任何位置上。(再也不用创建以前那些复杂的表格,就可以得到希望的准确布局了!)
现场调整大小功能让用户在调整元素大小时获得现场的 WYSIWYG 反馈。用户不用在拖动鼠标的同时描绘外边框,并在松开鼠标按钮时让元素自行调整大小,元素将随着用户拖动它的抓取手柄实时地调整大小。
多项选定让用户能够一次选定多个元素,并同时拖动它们或调整其大小。
新的“不可选定”属性使您能够为 Web 页创建用户界面元素,它们不会在用户单击时使当前选定内容遭到破坏。这对创建更改当前选定内容格式的控件非常有用,这一点我们随后就会谈到。
激活编辑器的方法有两种。第一种方法是将整个文档设置为设计模式。第二种方法可以在浏览模式中使用,来使各个元素可在运行时编辑。如果想让整个文档可在浏览时进行编辑,则可以在文档正文上设置 contentEditable 属性。
将文档设置为设计模式
要将整个文档设置为设计模式,可以对文档对象本身设置 designMode 属性。当文档处于设计模式时,将不运行脚本。这样,似乎在文档内设置一个按钮来打开或关闭设计模式是个好注意,但这样做没有作用。当用户打开它后,它将保持在设计模式状态。当他们下次单击此按钮时,它将被选定而不是被单击,他们再次单击它,将能够编辑它的值。这就是为什么如果要使用设计模式最好对框架或 IFrame 中的文档设置 designMode 属性的原因。下例展示如何为 IFrame 中的文档打开设计模式:
targetDoc = document.frames(0).document;
if (targetDoc.designMode == "On")
targetDoc.designMode = "Off";
else
targetDoc.designMode = "On";
</script>
<button id=btnDesign>DesignMode</button>
<iframe src="blank.htm" style="border: black thin; width:100%; height:200px"></iframe>
designMode 属性的值始终以首字母大写格式存储,即时它最初是以全部小写设置的。请在测试它的值时一定记住这点。designMode 属性的默认值是“Inherit”。
在浏览模式中使元素可以编辑(或在设计模式中不可编辑)
在 Internet Explorer 5.5 中,可以针对每个元素激活编辑器,而同时,文档本身处于浏览模式中。只要将 contentEditable 属性设置为 True,就能使元素在浏览时可被编辑。下例展示如何说明性地设置该属性,并创建行为类似文本框的跨距:
要防止元素在设计模式中处于可编辑状态,可以将 contentEditable 属性设置为 False。但这将使元素具有布局,这样,当它在设计模式中时,用户将能够对它进行控制选定、拖动、调整大小等:
foo.contentEditable=False;
contentEditable 元素的继承和嵌套
contentEditable 属性是被继承的,所以,如果您说明元素具有 contentEditable 属性,则默认情况下它的所有子元素都将是可编辑的。(contentEditable 属性的默认值是“Inherit”。
通过将其 contentEditable 属性设置为 False,可以使 contentEditable 元素的后代成为不可编辑的,但这样之后,请记住设置元素的 contentEditable 属性将导致元素具有自己的布局。无论元素的 contentEditable 属性被设置为 True 或 False,都要发生这样的情况。还要记住,当有布局的元素处在可编辑的容器中时,一旦用户单击它的内部,它将被控制选定。当它被控制选定时,将显示抓取手柄,并且用户可以拖动该元素或调整其大小。这并不表示不应当在可编辑的元素内嵌套不可编辑的元素,只不过要加以注意罢了。
判断元素是否是可编辑的
要判断元素是否是可编辑的,只检查 contentEditable 属性的值是不够的。元素可能根本没有 contentEditable 属性,但仍然可能已经从它的某个祖先那里继承了内容可编辑性。或者,它可能是默认时可编辑的元素,如文本框。或者,包含它的文档可能处于设计模式中。确定元素是否可编辑的唯一完全可靠的方法是检查 isContentEditable 属性。isContentEditable 属性综合了所有这些因素。该属性是只读的,其结果为布尔值。下例展示如何判断 ID 为“foo”的元素是否可以被编辑:
result=foo.isContentEditable;Internet Explorer 5.5 中的大多数基本编辑功能可通过发出命令来访问。MSDN Online 上的文档列出了可用的命令,并说明了要使用哪些参数。
要执行编辑命令,可调用 document.execCommand,并传递对应于命令 ID 的字符串。另外还有可选的第二个参数,该参数指定如果可以应用的话是否显示此命令的用户界面。传递整数 1 将显示用户界面,整数 0 将跳过它。这个参数通常不用于编辑命令。因为默认值为 0,所以假如您没有使用第三个参数(在这种情况下,还必须为第二个参数传递值),一般可以不管它。第三个参数也是可选的,在可应用的情况下,使用它来将任何所需参数传递给该命令。
例如,要打开多项选择功能,应当调用 document.execCommand("MultipleSelection")。
要打开现场调整大小功能,只需调用 document.execCommand("LiveResize")。要打开 2D 定位,请调用 document.execCommand("2D-Position")。
注意 2D 定位只能对 CSS 样式已设置为 position:absolute 的元素有效。
下例(见图 1)使用了 contentEditable 属性、unselectable 属性和三个可执行的命令来创建一个可在 Web 页上使用的简单的小文本编辑器。很重要的一点是,div 语句在另一个 div 语句中,而外层 div 底部有三个按钮。按钮使用 document.execCommand 方法来格式化当前选定内容的样式。内部 div 具有 contentEditable 属性,而外部 div 和按钮是不可选定的。由于它们是不可选定的,所以用户可以单击它们而不会破坏当前的选定内容。这对按钮尤其有用,因为用户可以选定 contentEditable 区域中的一些文本,然后单击粗体按钮、斜体按钮和下划线按钮,而不必重新选定文本:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
图 1 中值得申明的另一点是,现在可以指定滚动条的颜色了!(这是 Internet Explorer 5.5 的另一个新功能)。
图 1. 创建文本编辑器
如何保持可编辑的内容由您决定。如果您正在使用 Active Server Pages (ASP),您可以在窗体中包括可编辑的元素,之后使用 Post 方法将它们张贴到 ASP 页,然后以任何方式将它们存储在服务器上。有关 ASP 页的内容包含在 ASP SDK 中,这里不作详细说明。另一个方法,也可能是更有趣的方法,是使用 UserData 行为将数据保持在客户端。
UserData 行为
UserData 行为是将 contentEditable 元素中的内容保持在用户计算机的某个存储区中的最好方法。行为是 Internet Explorer 5.0 中引入的一种封装可重用脚本和/或 HTML 的方法。行为存在于它自己的、称为 HTC(HTML 组件)文件中,该文件被位于客户端文档的文件头中的 CSS 样式段加以引用。将行为应用到元素所用的方法与应用 CSS 样式相同。一旦行为与某个元素相关联,则属于该行为的所有方法都将被调用到该元素上。
UserData 是行为具有强大功能的极好范例。通过为在 Save 和 Load 方法中所指定的 UserData 存储指定不同的名称,可以使用 UserData 行为来将多个元素的内容保持在单个页面上。唯一的限制是每页不能存储超过 64KB,每个域的限制则为 640KB。下一个范例展示如何保持单个 contentEditable 元素中的内容。
该范例中的元素是一个名为“foo”的 contentEditable div 语句。注意,在文件头的样式说明中,说明了 UserData 行为。通过说明元素的类为“userData”,行为被附加到 contentEditable 元素上。这样,可以访问由 UserData 行为显露的方法,如 setAttribute、getAttribute、Load 和 Save,就好象它们是元素自身的方法一样。(只要属性名在 getAttribute 和 setAttribute 方法中是一致的,而存储名在 Load 和 Save 方法中是一致的,就可以以任何名称命名用来保持数据的存储和属性。)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
图 2 展示了一个 contentEditable div 语句和三个按钮,它们允许用户保存 div 的内容、加载所保存的内容和清除当前的内容。另一个好的技巧是,当用户转到其它页时,window.onBeforeUnload
事件处理程序将自动存储用户输入的内容。然后,当他们返回时,window.onLoad
事件处理程序将自动还原它。当用户返回您的 Web 页并发现他们上次留下的相同内容仍然存在,他们一定非常吃惊。
图 2. 使用 UserData 行为保持数据
元素行为是一个完全自我约束的自定义元素,可以将它当作固有的 HTML 控件。在前面有关保持的内容中,我们看到了 UserData 行为,该行为可以与任何元素关联。与标准行为相比,元素行为有其自己的元素标记,并且它不能应用到其它任何元素。行为不能脱离元素本身。
“viewlinked”元素行为:无需将生成该 UI 的 HTML 插入到调用它的文档中,其用户界面即可在浏览时显示。当用户查看 Web 的源文件时,他们只能看到代表该元素的标记,用户永远无法看见导致元素外观和动作的源文件。只有元素行为可以是 viewlinked。
有关元素行为的另一个重要情况是,无论元素标记什么时候可见于分析程序,行为都是可用的。永远不会出现元素在那里,而行为还没有加载的二者分离的情形。所有这些优点,使得元素行为成为创建可随时随地重复使用的、您自己的 HTML 控件的最好方法。
一个简单的例子
在该范例中,将获得简单的小文本编辑器(图 1),另外添加几个按钮使它更有趣,将它封装在一个 HTC 文件中,并添加几条线以告诉分析程序将它当作 viewlinked 元素行为。之后,我们将看见如何在 HTML 文件中创建该组件的实例。
HTC 文件
下面的代码是一个 HTC 文件,该文件包含了定义组件的源。注意,在顶部的 public:component
说明中包括了标记名称(在这里是“editBox”)。当新组件被插入 HTML 文件中时,这就是用来标识该新组件的名称。在 public:component
说明中的其它说明是 public:defaults viewLinkContent 说明,
它指定该元素行为是 viewlinked 的。将这些说明添加到文件顶部,并用 .htc 扩展名保存该文件,这样就完成了把新创建的 DHTML 转换成元素行为的全部操作。在这里,我们将该文件命名为“editBox.htc”。(并不是一定要将文件命名为与元素本身相同的名称,这样做只是为了便于记忆。)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
HTML 文件
现在既然已经看过了 HTC 文件,接着让我们来看看 HTML 文件。在该文件中与任何其它 HTML 文件唯一不同的内容是位于文件顶部的 html 说明中的 namespace 属性,另一个不同是处理指导 (PI),它告诉分析程序在哪里找到 editBox 元素的执行文件。当碰巧名称相同的单独 HTC 文件中有两个不同的元素行为时,就必需要有 namespace 属性。namespace 提供了分辨它们的方法。导入语句简单地告诉分析程序当它看见标记名有前缀“x”时,它应当在指定的执行文件中查找该标记的定义。所以,无论什么时候使用用于新组件的标记,都必须用在 PI 中已经说明的 namespace 来给该标记加上前缀。(与在 XML 中的 namespaces 不同,这个 namespace 不是“统一资源名 (URN)”,并且它与标记本身没有固有关联。namespace 由 HTML 文件的创作者定义,并且对说明它的文件来说,它位于本地。它类似于在特殊 XML 文件中与 XML namespace 相关联的前缀。)
<html xmlns:x>
<head>
< import namespace=x implementation="editBox.htc" />
</head>
<body>
<x:editbox>
</body>
</html>
图 3. Viewlinking 元素行为
摘要
在了解如何创建简单的文本编辑器作为元素行为后,您就可以轻松地对它进行扩展了,方法是添加持久性、使用前面介绍的 UserData 行为、添加用于选择字体和字体大小的控件。还可以对它进一步扩展,比如将菜单或下拉框添加到 UI 以便插入控件、图象和字幕,以及支持 2D 绝对定位、多项选定和现场调整大小。(无疑,还可以制作出更好看的用户界面!)通过合并使用浏览时编辑功能、UserData 持久性和元素行为,要想创建很棒的编辑组件几乎不受任何限制!
当然,并不是说您必须执行元素行为才能创建可编辑的 Web 页。Viewlinking 只是提供绝佳的方法来压缩及重复使用您所建立的行为(这样可以避免泄露您的 HTML 源文件)。
在了解 Internet Explorer 5.5 中所有最棒的新编辑功能之后,剩下的事就看您的了。相信您将会成为您公司中第一个提供实时、“所见即所得”可编辑 Web 页的人!(您的同事一定非常羡慕又嫉妒。)
Peggi Goodwin
Microsoft Corporation
2000年5月