编写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 ? "
" : "";
 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, 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;
}

Insert Input

 
    Name:
   
 

  OK
  Cancel

6 在example目录下，建立一个测试文件

在相应位置加入以下代码

HTMLArea.loadPlugin("FormControl");

var editor = null;
function initEditor() {
  editor = new HTMLArea("ta");

  // register the FormControl plugin with our editor
  editor.registerPlugin("FormControl");

到此为止，整个插件就可以正常工作了。这只是开发插件的一种形式，另外你还可以覆盖原有的按钮的功能。或者参考它自带的插件来了解更复杂的插件编写方法。

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=346187