编写HtmlArea控件的插件：经典教程

最新推荐文章于 2022-03-08 16:50:38 发布

原创最新推荐文章于 2022-03-08 16:50:38 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #insert #input #button #underscore #translation

本文介绍如何为HtmlArea编辑器开发插件，包括创建目录、编写JavaScript代码、国际化资源文件、图标及弹窗等内容。

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

Insert/Modify Link

Insert Input

Name:

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

在相应位置加入以下代码