Plugin for writing HTMLAREA controls: Classic Tutorial

HTMLAREA is a powerful WysiwyG HTML editor. Its power is not only reflected in its functionality and maturity, but also reflects that it provides developers with a flexible architecture to write your own plugins! Below will be explained by an actual example to explain the development process of the plugin.

1 First create a directory for your plugin in its plugin directory, such as FormControl, the role of this plugin is inserted into the HTML form element in the page. In this case, we only implement the simplest text input box insertion.

2 Next, create a Form-Control.js file.

// 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 buttonFormControl.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 (!) {i (!) {}} var doc = Editor._doc; // Create The Table Element var Input = Doc.createElement (" Input " ); // assign the given arguments for (var value = param [field]; if (! Value) {Continue;} switch (field) {copy "f_name": input.name = value; Break }}} If (htmlarea.is_ie) {range.pastehtml;} else {// INSERT The INPUT Editor.insertNodeation (Input);} return true;}, NULL);

FormControl.btnlist = [// Basic Controls ["Insert-Input"], NULL, // Separator

// Macro Controls ["Insert-Date"]

];

3 Next to build a resource file for en.js in the LANG directory

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 INSERT", "To-Insert-Date": "Insert Date Macro", Dialogs: {"You Must Enter The Name of the Input Field": "You Must Enter the name of the name of there INPUT FIELD "}}; 4 to establish two pictures, put in IMG directory insert-date.gif insert-input.gif

5 Enclose Insert_input.html in the popups directory