掌握 Dojo 富文本编辑器（3）创建自己的插件更新
|
- UID
- 1066743
|
掌握 Dojo 富文本编辑器（3）创建自己的插件更新
处理事件和实现功能接下来，是让 Find and Replace 按钮真正开始工作的步骤。可以在 setToolbar 方法中进行设置，如清单 11 所示。
清单 11. 处理事件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| setToolbar: function(editorToolbar){
...
var tb = this._frToolbar = ...
// Connect methods to the onClick events of the buttons.
this.connect(tb.findButton, "onClick", "_find");
this.connect(tb.replaceButton, "onClick", "_replace");
this.connect(tb.replaceAllButton, "onClick", "_replaceAll");
// Make the ENTER key work for the "Find" text field.
this.connect(tb.findField, "onKeyDown", function(evt){
if(evt.keyCode == dojo.keys.ENTER){
this._find();
dojo.stopEvent(evt);
}
});
...
}
|
非常简单。下一步是实现 _find 功能。对于非 IE 浏览器，只需要使用 window.find 即可。对于 IE，事情变得有点复杂。需要编写一个适配器函数来消除浏览器差异，如清单 12 所示。
清单 12. 实现查找功能1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| // An adapter function to make all browsers look the same.
_findText: function(txt, isCaseSensitive, isBackwards){
if(!txt){ return false; }
var ed = this.editor, win = ed.window, doc = ed.document;
var found = false;
if(win.find){
found = win.find(txt, isCaseSensitive, isBackwards,
false, false, false, false);
}else if(doc.selection){
/* IE */
// Focus to restore position/selection,
// then shift to search from current position.
ed.focus();
var txtRg = doc.body.createTextRange();
var curPos = doc.selection ? doc.selection.createRange() : null;
if(curPos){
txtRg.setEndPoint(isBackwards ? "EndToStart" : "StartToEnd",
curPos);
}
var flags = isCaseSensitive ? 4 : 0;
if(backwards){
flags = flags | 1;
}
found = txtRg.findText(txt, txtRg.text.length, flags);
if(found){
txtRg.select();
}
}
return found;
},
_find: function(){
var tb = this._frToolbar;
return this._findText(tb.findField.get("value"),
tb.matchCase.get("value"), tb.backwards.get("value"));
}
|
再次运行页面，查看效果，如图 5 所示。
图 5. 查找文本 现在，您在大多数现代浏览器中具备了有用的 Find 功能。
通过编程方式编辑内容Dojo 富文本编辑器提供了一个统一 API execCommand，可以使用它调用内置命令。有许多命令可用，比如 ndo、Redo、Cut、Copy、Paste、Bold 和 Italic。要获得内置命令的完整列表，请参考 dijit.Editor 文档（参见 ）。
对于示例插件，需要向编辑器插入一些文本来替换选中的文本。当然，有一个内置的命令可以完成这个操作 —inserthtml。您必须执行下面的操作：
- 检查选中的文本是否匹配 find 字段中的文本。
- 如果是的话，调用 editor.execCommand("inserthtml", replaceText);
清单 13 显示了代码。
清单 13. 实现替换功能1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| _replace: function(){
var tb = this._frToolbar;
var txt = tb.findField.get("value");
if(!txt){ return false; }
var repTxt = tb.replaceField.get("value") || "";
var isCaseSensitive = tb.caseSensitive.get("value");
var isBackwards = tb.backwards.get("value");
var ed = this.editor;
ed.focus();
//Replace the current selected text if it matches the find field.
var selected = dojo.withGlobal(ed.window, "getSelectedText",
dijit._editor.selection, [null]);
if(selected && (isCaseSensitive ?
(selected === txt) : (selected.toLowerCase() === txt.toLowerCase()))){
ed.execCommand("inserthtml", repTxt);
return true;
}
return false;
}
|
您应该在编辑器中使用浮动框架窗口调用 getSelectedText，而不是在整个页面的窗口。图 6 显示了结果。
图 6. 替换文本 您现在了解了编写编辑器插件的基本细节。也许您可以自己实现一个 Replace All 功能作为练习。 |
|
|
|
|
|
