编写HtmlArea控件的插件：经典教程
HtmlArea是一个强大的wysiwyg的html编辑器。它的强大不仅体现在它的功能的完善和成熟上，还体现在它为开发者提供了一个灵活的架构来编写你自己需要的插件！下面本文通过一个实际的例子来讲解插件的开发过程。
1首先在其plugin目录下为你的插件建立一个目录，例如FormControl，这个插件的作用是在页面中插入html表单元素，本例中我们只实现最简单的文本输入框的插入。
2 接下来，建立form-control.js文件。
// Object that will insert form control into HTMLArea-3.0
function FormControl(editor) {
this.editor = editor;
var cfg = editor.config;
var tt = FormControl.I18N;
var bl = FormControl.btnList;
var self = this;
// register the toolbar buttons provided by this plugin
var toolbar = ["linebreak"];
for (var i in bl) {
var btn = bl[i];
if (!btn) {
toolbar.push("separator");
} else {
var id = "TO-" + btn[0];
cfg.registerButton(id, tt[id], editor.imgURL(btn[0] + ".gif", "FormControl"), false,
function(editor, id) {
// dispatch button press event
self.buttonPress(editor, id);
});
toolbar.push(id);
}
}
// add a new line in the toolbar
cfg.toolbar.push(toolbar);
};
FormControl._pluginInfo = {
name : "FormControl",
version : "1.0",
developer : "Daniel Summer",
developer_url : "http://www.exoplatform.com",
c_owner : "Daniel Summer",
sponsor : "eXo Platform SARL",
sponsor_url : "http://www.exoplatform.com",
license : "htmlArea"
};
FormControl.prototype.buttonPress = function(editor, button_id) {
this.editor = editor;
var mozbr = HTMLArea.is_gecko ? "<br />" : "";
var i18n = FormControl.I18N;
switch (button_id) {
case "TO-insert-input":
this._insertInput(editor);
break;
case "insertCombo":
}
}
// this function requires the file PopupDiv/PopupWin to be loaded from browser
// Called when the user clicks the Insert Input button
FormControl.prototype._insertInput = function(editor) {
var sel = editor._getSelection();
var range = editor._createRange(sel);
var editor = editor; // for nested functions
editor._popupDialog("insert_input.html", function(param) {
if (!param) { // user must have pressed Cancel
return false;
}
var doc = editor._doc;
// create the table element
var input = doc.createElement("input");
// assign the given arguments
for (var field in param) {
var value = param[field];
if (!value) {
continue;
}
switch (field) {
case "f_name" : input.name = value; break;
}
}
if (HTMLArea.is_ie) {
range.pasteHTML(input.outerHTML);
} else {
// insert the input
editor.insertNodeAtSelection(input);
}
return true;
}, null);
};
FormControl.btnList = [
// basic controls
["insert-input"],
null, // separator
// macro controls
["insert-date"]
];
3 接下来在lang目录下建立一个en.js的资源文件
FormControl.I18N = {
// Items that appear in menu. Please note that an underscore (_)
// character in the translation (right column) will cause the following
// letter to become underlined and be shortcut for that menu option.
"TO-insert-input" : "Insert Input",
"TO-insert-date" : "Insert Date Macro",
dialogs: {
"You must enter the name of the input field" : "You must enter the name of the input field"
}
};
4 建立两张图片，放在img目录下insert-date.gif insert-input.gif
5 在popups目录下，建立insert_input.html
<html>
<head>
<title>Insert/Modify Link</title>
<script type="text/javascript" src="popup.js"></script>
<script type="text/javascript">
window.resizeTo(400, 200);
I18N = window.opener.FormControl.I18N.dialogs;
function i18n(str) {
return (I18N[str] || str);
};
function onTargetChanged() {
var f = document.getElementById("f_other_target");
if (this.value == "_other") {
f.style.visibility = "visible";
f.select();
f.focus();
} else f.style.visibility = "hidden";
};
function Init() {
__dlg_translate(I18N);
__dlg_init();
var param = window.dialogArguments;
document.getElementById("f_name").focus();
document.getElementById("f_name").select();
};
function onOK() {
var required = {
"f_name": i18n("You must enter the name of the input field")
};
for (var i in required) {
var el = document.getElementById(i);
if (!el.value) {
alert(required[i]);
el.focus();
return false;
}
}
// pass data back to the calling window
var fields = ["f_name"];
var param = new Object();
for (var i in fields) {
var id = fields[i];
var el = document.getElementById(id);
param[id] = el.value;
}
__dlg_close(param);
return false;
};
function onCancel() {
__dlg_close(null);
return false;
};
</script>
<style type="text/css">
html, body {
background: ButtonFace;
color: ButtonText;
font: 11px Tahoma,Verdana,sans-serif;
margin: 0px;
padding: 0px;
}
body { padding: 5px; }
table {
font: 11px Tahoma,Verdana,sans-serif;
}
select, input, button { font: 11px Tahoma,Verdana,sans-serif; }
button { width: 70px; }
table .label { text-align: right; width: 8em; }
.title { background: #ddf; color: #000; font-weight: bold; font-size: 120%; padding: 3px 10px; margin-bottom: 10px;
border-bottom: 1px solid black; letter-spacing: 2px;
}
#buttons {
margin-top: 1em; border-top: 1px solid #999;
padding: 2px; text-align: right;
}
</style>
</head>
<body onload="Init()">
<div class="title">Insert Input</div>
<table border="0" style="width: 100%;">
<tr>
<td class="label">Name:</td>
<td><input type="text" id="f_name" style="width: 100%" /></td>
</tr>
</table>
<div id="buttons">
<button type="button" name="ok" onclick="return onOK();">OK</button>
<button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
</div>
</body>
</html>
6 在example目录下，建立一个测试文件
在相应位置加入以下代码
<script type="text/javascript">
HTMLArea.loadPlugin("FormControl");
var editor = null;
function initEditor() {
editor = new HTMLArea("ta");
// register the FormControl plugin with our editor
editor.registerPlugin("FormControl");
到此为止，整个插件就可以正常工作了。这只是开发插件的一种形式，另外你还可以覆盖原有的按钮的功能。或者参考它自带的插件来了解更复杂的插件编写方法。