使用 Ajax 技术构建 Web 演示应用程序，第 2 部分: 创建可编辑的 Web 演示

核心提示： 使文本框可编辑在清单 1 中的源代码中，我们将一个 division 属性设置为 true，使用 Ajax 技术构建 Web 演示应用程序，第 2 部分: 创建可编辑的 Web 演示(3)，这样，我们就可以调整文本框的大小、拖动它并在其中输入文本，图 6. 编辑工具栏的屏幕截图查看原图（大图）首

使文本框可编辑

在清单 1 中的源代码中，我们将一个 division 属性设置为 true。这样，我们就可以调整文本框的大小、拖动它并在其中输入文本。只需将代码 textDiv.contentEditable="true"; 添加到函数的末尾。您可以在 js/toolbar.js 文件中找到这个完整的函数。

图 5. 一个可编辑文本对象的屏幕截图

添加编辑栏操作

拥有一个可编辑的文本对象后，您需要向编辑工具栏添加一些操作，如图 6 所示。这个工具栏实际上是 HTML 页面中的一个表，我们将介绍每个函数的代码。在样例代码（参见 下载）中，您可以在 index.html 中找到所有函数。

图 6. 编辑工具栏的屏幕截图

查看原图（大图）

首先，通过将清单 2 中的代码放置到 js/toolbar.js 文件中来定义一个 cmdExec() 函数。

清单 2. cmdExec() 的定义

　function　cmdExec(cmd,　opt)　
　{　document.execCommand(cmd,"",　opt);　
　}　

然后使用以下几个代码样例来为工具栏按钮定义函数。

清单 3. Undo 工具栏按钮的代码

　<img　hspace="1"　vspace=1　align=absmiddle　src="http://tech.ddvip.com/2010-02/images/undo.gif"　alt="Undo"　
　　　
　　　
　　width="23"　height="22"　
　>