电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 掌握 Dojo 富文本编辑器（1）简介 [打印本页]

作者: look_w 时间: 2018-10-18 16:42 标题: 掌握 Dojo 富文本编辑器（1）简介

简介Dojo 富文本编辑器 Dijit.Editor 的目的是像一个文字处理器那样工作。它提供了工具栏、HTML 输出和一个支持新命令、新按钮和其他特性的插件架构。并且，您不需要担心浏览器不兼容性，该编辑器支持多种浏览器，包括 Internet Explorer (IE) 6/7/8、Firefox3、Chrome 和 Safari。
在本文中，了解 Dojo 富文本编辑器的基本知识以及如何使用 Dojo 提供的插件增强它的性能。您还可以创建自己的插件，并学习如何扩展编辑器的工具栏。
Dojo 富文本编辑器图 1 显示了典型的 Dojo 富文本编辑器。它有一个工具栏，其中包含一些有用的命令，如剪切、复制和粘贴。您可以使用 WYSIWYG 格式编辑内容。
图 1. Dojo 富文本编辑器

这个编辑器使用起来非常简单。第一步是进入在其中使用编辑器的页面。在发出所有 dojo.require 命令的位置执行此步骤 — 通常是一个头脚本标记。还需要导入一个 CSS 文件以选择一个主题，例如 Claro。注意，正文元素的 CSS 类别被设置为 claro，如清单 1 所示。
清单 1. 导入编辑器类定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
<head>
<title>Dojo Rich Text Editor</title>
<style type="text/css">
@import "../../../dijit/themes/claro/claro.css";
</style>
<script type="text/javascript">
dojo.require("dijit.Editor");
</script>
</head>
<body class="claro">

</body>
</html>

有两种方法可以创建一个编辑器：编程方式或声明方式。这两种方法的效果是相同的。清单 2 显示了如何以声明方式创建编辑器。
清单 2. 以声明方式创建编辑器

1
2
3
4
5

<div dojoType="dijit.Editor" id="editor1">
<p>
This is the content of the editor.
</p>
</div>

如果您查看创建的编辑器的 DOM 树，将发现编辑器由两部分组成：一个工具栏和一个浮动框架（iframe）区域。浮动框架的文档的 designMode 属性被设置为 on，这使您可以直接编辑浮动框架的内容。这就是该编辑器的吸引人之处。
在启用设计模式后，浏览器使您可以通过调用内置命令修改内容。例如，通过在 Firefox 中调用命令 execCommand('bold',false, null)，可以将选中的一些文本设置为粗体。每个浏览器的内置命令是不一样的。幸运的是，编辑器实现了标准化，因此可以调用编辑器提供的统一 API 修改内容。
要使用 Dojo 富文本编辑器，单击工具栏中的按钮图标以触发一个事件（例如，单击），如图 2 所示。该事件将被编辑器或其插件捕获。通过调用内置命令或直接修改 DOM 节点，浮动框架文档的 DOM 树将被修改。
图 2. 处理编辑请求的工作流程

插件Dojo 富文本编辑器的可插入式架构使您能够通过实现和注册插件来扩展编辑器的功能。插件可以向编辑器添加某种功能，或改变编辑器的行为。Dojo 包括若干编辑器插件，您也可以编写自己的插件。
一些插件，例如 Undo、Redo、Cut 和 Copy，在默认情况下是启用的。大多数插件有一个关联的工具栏按钮，如 FindReplace 插件。一些插件，例如 EnterKeyHandling，不需要修改工具栏就可以影响编辑器的行为。编辑器将按照如下所示加载并初始化一个插件。

导入必要的 CSS 文件。某些插件可能有一些相关的 CSS 文件。CSS 文件定义了插件的 UI 布局，因此您需要首先将 CSS 文件导入到文档。
在 extraPlugins 列表中声明文件。插件应当在 extraPlugins 列表中声明，这样编辑器才可以从声明中创建插件实例，如清单 3 所示。
清单 3. 声明插件
1
2
3
4
5
<div dojoType="dijit.Editor" id="editor1" extraPlugins="['FindReplace']">
<p>
This is the content of the editor.
</p>
</div>

清单 3 中的示例声明了一个名为 FindReplace 的插件。
将声明的插件放入到完整的插件列表。编辑器将把声明的插件和默认的插件一起放入到一个完整的插件列表。在这个阶段，编辑器包含一个插件名列表。实际的插件将根据如下步骤创建。

创建编辑器的工具栏。编辑器将创建 dijit.Toolbar 的实例并将它附加到其 DOM 节点的子节点上，如清单 4 所示。
清单 4. 创建编辑器的工具栏

1
2
3
4
5
6
7
8

if(!this.toolbar){
// if you haven't been assigned a toolbar, create one
this.toolbar = new dijit.Toolbar({
dir: this.dir,
lang: this.lang
});
this.header.appendChild(this.toolbar.domNode);
}

根据列表创建插件实例。这一步是关键所在。编辑器将枚举插件名列表并逐一对这些名称调用 addPlugin。在 addPlugin 方法中，插件将被创建，并且它们的 setEditor 和 setToolbar 方法将被调用以初始化它们的上下文。
清单 5. 创建插件实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

postCreate: function(){
...
// Create the plug-in one by one
dojo.forEach(this.plugins, this.addPlugin, this);
...
}
addPlugin: function(/*String||Object*/plugin, /*Integer?*/index){
...
// Get the plug-in instance that is referenced by paremeter o.plugin.
var o={"args":args,"plugin":null,"editor":this};
dojo.publish(dijit._scopeName + ".Editor.getPlugin",[o]);
// Set the plug-in's context
plugin.setEditor(this);
if(dojo.isFunction(plugin.setToolbar)){
plugin.setToolbar(this.toolbar);
}
...
}

声明的所有插件都将被创建和初始化。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)