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

lujar

浏览: 524261 次
性别:
来自: 杭州

最近访客更多访客>>

jzhfmm

小小wuya

chimpp55

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript F#prototype IE HTML

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 onCancel() {
__dlg_close(null);
return false;
};

</script>

.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>

<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目录下，建立一个测试文件

在相应位置加入以下代码

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

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

分享到：

什么是ESB，企业服务总线 | JBPM的任务分派机制

2005-04-13 17:46
浏览 888
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论