在Internet Explorer 5.5中创建可编辑的Web 页

Peggi Goodwin

Microsoft Corporation

2000年5月摘要：本文讨论 MSHTML，这是对 Internet Explorer 中分析和展现引擎的 HTML 扩展，它允许直接在浏览器内编辑 Web 页。

文本编辑功能 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 等）

字体大小

文本样式和装饰（斜体、粗体、下划线、加删除线、上标、下标）

文本颜色

背景颜色段落格式：

缩进

伸出

左、右、居中以及页边对齐

文本方向（右到左，或左到右）列表编辑：

带编号的列表

带项目符号的列表

嵌套到任何等级选定服务：

通过拖动鼠标选定范围

通过双击选定单词

通过三次单击选定段落

基于键盘的选定（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 格式输入，而不再是文档的默认字体。

Web 创作功能

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>

designMode 属性的值始终以首字母大写格式存储，即时它最初是以全部小写设置的。请在测试它的值时一定记住这点。designMode 属性的默认值是“Inherit”。

在浏览模式中使元素可以编辑（或在设计模式中不可编辑）

在 Internet Explorer 5.5 中，可以针对每个元素激活编辑器，而同时，文档本身处于浏览模式中。只要将 contentEditable 属性设置为 True，就能使元素在浏览时可被编辑。下例展示如何说明性地设置该属性，并创建行为类似文本框的跨距：

要使元素在全部脚本过程中可被编辑是非常容易实现的。下面的范例显示如何在脚本中对 ID 为“foo”的元素设置 contentEditable 属性：

foo.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 区域中的一些文本，然后单击粗体按钮、斜体按钮和下划线按钮，而不必重新选定文本：

<div unselectable="on" align=center

style="height:300; width:400; background-color:powderblue; border:outset powderblue">

<br>

<div id=foo contenteditable align=left

style="height:250; width:350;background-color:white; font-face:Arial; padding:3;

border:inset powderblue; scrollbar-base-color:powderblue; overflow=auto;">

</div>

<br>

<button unselectable="On" onclick='document.execCommand("Bold");foo.focus();'

style="width:80; background-color:powderblue; border-color:powderblue">

<button unselectable="On" onclick='document.execCommand("Italic");foo.focus();'

style="width:80; background-color:powderblue; border-color:powderblue">

<button unselectable="On" onclick='document.execCommand("Underline");foo.focus();'

style="width:80; background-color:powderblue; border-color:powderblue;">

</div>

图 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 方法中是一致的，就可以以任何名称命名用来保持数据的存储和属性。）

<html>

<head>

DoLoad();

</script>

DoSave();

</script>

function DoSave(){

foo.setAttribute("content", foo.innerHTML);

foo.save("EditContent");

}

function DoLoad(){

foo.load("EditContent");

content = foo.getAttribute("content");

if (content != null) foo.innerHTML=content;

}

function DoClear(){

foo.innerHTML = "";

}

</script>

</head>

<body>

</p>

</div>

</body>

</html>

图 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”。（并不是一定要将文件命名为与元素本身相同的名称，这样做只是为了便于记忆。）

<public:component tagName=editBox>

<public:defaults viewLinkContent/>

</public:component>

<div unselectable="on" align=center style="height:250; width:425;

background-color:powderblue; border:outset powderblue">

<br>

<div id=foo contenteditable align=left

style="height:200; width:370;background-color:white; font-face:Arial; padding:3;

border:inset powderblue; scrollbar-base-color:powderblue; overflow=auto;">

</div>

<br>

<button unselectable="On" onclick='document.execCommand("Bold");foo.focus();'

style="background-color:powderblue; border-color:powderblue" title="粗体">

<button unselectable="On" onclick='document.execCommand("Italic");foo.focus();'

style="background-color:powderblue; border-color:powderblue" title="斜体">

<button unselectable="On" onclick='document.execCommand("Underline");foo.focus();'

style="background-color:powderblue; border-color:powderblue;" title="下划线">

<button unselectable="On" onclick='document.execCommand("StrikeThrough");foo.focus();'

style="background-color:powderblue; border-color:powderblue; text-decoration=line-through"

title="删除线">

<button unselectable="On" onclick='document.execCommand("SuperScript");foo.focus();'

style="background-color:powderblue; border-color:powderblue" title="上标">

<button unselectable="On" onclick='document.execCommand("SubScript");foo.focus();'

style="background-color:powderblue; border-color:powderblue" title="下标">

<button unselectable="On" onclick='document.execCommand("InsertOrderedList");foo.focus();'

style="background-color:powderblue; border-color:powderblue" title="已排序列表">

<button unselectable="On" onclick='document.execCommand("InsertUnorderedList");foo.focus();'

style="background-color:powderblue; border-color:powderblue" title="未排序列表">

<button unselectable="On" onclick='document.execCommand("Outdent");foo.focus();'

style="background-color:powderblue; border-color:powderblue" title="突出">

<button unselectable="On" onclick='document.execCommand("Indent");foo.focus();'

style="background-color:powderblue; border-color:powderblue" title="缩进">

<button unselectable="On" onclick='document.execCommand("JustifyLeft");foo.focus();'

style="background-color:powderblue; border-color:powderblue" title="左对齐">

<button unselectable="On" onclick='document.execCommand("JustifyRight");foo.focus();'

style="background-color:powderblue; border-color:powderblue" title="右对齐">

<button unselectable="On" onclick='document.execCommand("JustifyCenter");foo.focus();'

style="background-color:powderblue; border-color:powderblue" title="居中">

<br>

<button unselectable="On" onclick='document.execCommand("Cut");foo.focus();'

style="background-color:powderblue; border-color:powderblue"><B>剪切</B></button>

<button unselectable="On" onclick='document.execCommand("Copy");foo.focus();'

style="background-color:powderblue; border-color:powderblue"><B>复制</B></button>

<button unselectable="On" onclick='document.execCommand("Paste")'

style="background-color:powderblue; border-color:powderblue"><B>粘贴</B></button>

<button unselectable="On" onclick='document.execCommand("Overwrite");foo.focus();'

style="background-color:powderblue; border-color:powderblue"><B>覆盖</B></button>

</div>

HTML 文件

现在既然已经看过了 HTC 文件，接着让我们来看看 HTML 文件。在该文件中与任何其它 HTML 文件唯一不同的内容是位于文件顶部的 html 说明中的 namespace 属性，另一个不同是处理指导 (PI)，它告诉分析程序在哪里找到 editBox 元素的执行文件。当碰巧名称相同的单独 HTC 文件中有两个不同的元素行为时，就必需要有 namespace 属性。namespace 提供了分辨它们的方法。导入语句简单地告诉分析程序当它看见标记名有前缀“x”时，它应当在指定的执行文件中查找该标记的定义。所以，无论什么时候使用用于新组件的标记，都必须用在 PI 中已经说明的 namespace 来给该标记加上前缀。（与在 XML 中的 namespaces 不同，这个 namespace 不是“统一资源名 (URN)”，并且它与标记本身没有固有关联。namespace 由 HTML 文件的创作者定义，并且对说明它的文件来说，它位于本地。它类似于在特殊 XML 文件中与 XML namespace 相关联的前缀。）

<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 页的人！（您的同事一定非常羡慕又嫉妒。）