git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/_editor/test_CustomPlugin.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2                 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>Editor Custom Plugin Test/Tutorial</title>
   6
   7         <style type="text/css">
   8                 @import "../../dojo/resources/dojo.css";
   9                 @import "css/dijitTests.css";
  10         </style>
  11         <script type="text/javascript" src="../../../dojo/dojo.js"
  12                 djConfig="parseOnLoad: true, isDebug: true"></script>
  13         <script type="text/javascript" src="../_testCommon.js"></script>
  14
  15         <script type="text/javascript">
  16                 dojo.require("dijit.Editor");
  17                 dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  18
  19
  20                 dojo.require("dijit._Widget");
  21                 dojo.require("dijit._Templated");
  22                 dojo.require("dijit._editor._Plugin");
  23                 dojo.require("dijit.Dialog");
  24                 dojo.require("dijit.form.Button");
  25                 dojo.require("dijit.form.ValidationTextBox");
  26                 dojo.require("dojo.i18n");
  27                 dojo.require("dojo.string");
  28                 dojo.requireLocalization("dijit._editor", "LinkDialog");
  29
  30                 dojo.declare("myPlugin",
  31                         dijit._editor._Plugin,
  32                         {
  33                                 buttonClass: dijit.form.DropDownButton,
  34                                 useDefaultCommand: false,
  35                                 urlRegExp: "((https?|ftps?)\\://|)(([0-9a-zA-Z]([-0-9a-zA-Z]{0,61}[0-9a-zA-Z])?\\.)+(arpa|aero|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|xxx|jobs|mobi|post|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|eu|es|et|fi|fj|fk|fm|fo|fr|ga|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sk|sl|sm|sn|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)|(((\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])|(0[xX]0*[\\da-fA-F]?[\\da-fA-F]\\.){3}0[xX]0*[\\da-fA-F]?[\\da-fA-F]|(0+[0-3][0-7][0-7]\\.){3}0+[0-3][0-7][0-7]|(0|[1-9]\\d{0,8}|[1-3]\\d{9}|4[01]\\d{8}|42[0-8]\\d{7}|429[0-3]\\d{6}|4294[0-8]\\d{5}|42949[0-5]\\d{4}|429496[0-6]\\d{3}|4294967[01]\\d{2}|42949672[0-8]\\d|429496729[0-5])|0[xX]0*[\\da-fA-F]{1,8}|([\\da-fA-F]{1,4}\\:){7}[\\da-fA-F]{1,4}|([\\da-fA-F]{1,4}\\:){6}((\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])))(\\:(0|[1-9]\\d*))?(/([^?#\\s/]+/)*)?([^?#\\s/]+(\\?[^?#\\s/]*)?(#[A-Za-z][\\w.:-]*)?)?",
  36                                 linkDialogTemplate: [
  37                                         "<table><tr><td>",
  38                                         "<label for='${id}_urlInput'>${url}</label>",
  39                                         "</td><td>",
  40                                         "<input dojoType='dijit.form.ValidationTextBox' regExp='${urlRegExp}' required='true' id='${id}_urlInput' name='urlInput'>",
  41                                         "</td></tr><tr><td>",
  42                                         "<label for='${id}_textInput'>${text}</label>",
  43                                         "</td><td>",
  44                                         "<input dojoType='dijit.form.ValidationTextBox' required='true' id='${id}_textInput' name='textInput'>",
  45                                         "</td></tr><tr><td colspan='2'>",
  46                                         "<button dojoType='dijit.form.Button' type='submit'>${set}</button>",
  47                                         "</td></tr></table>"
  48                                 ].join(""),
  49
  50                                 constructor: function(){
  51                                         var _this = this;
  52                                         this.tag = this.command == 'insertImage' ? 'img' : 'a';
  53                                         var messages = dojo.i18n.getLocalization("dijit._editor", "LinkDialog", this.lang);
  54                                         var dropDown = (this.dropDown = new dijit.TooltipDialog({
  55                                                 title: messages[this.command + "Title"],
  56                                                 execute: dojo.hitch(this, "setValue"),
  57                                                 onOpen: function(){
  58                                                         _this._onOpenDialog();
  59                                                         dijit.TooltipDialog.prototype.onOpen.apply(this, arguments);
  60                                                 },
  61                                                 onCancel: function(){
  62                                                         setTimeout(dojo.hitch(_this, "_onCloseDialog"),0);
  63                                                 },
  64                                                 onClose: dojo.hitch(this, "_onCloseDialog")
  65                                         }));
  66
  67                                         this.button = new this.buttonClass({
  68                                                 label: "my plugin button",
  69                                                 showLabel: true,
  70                                                 iconClass: "",
  71                                                 dropDown: this.dropDown,
  72                                                 tabIndex: "-1"
  73                                         });
  74
  75                                         messages.urlRegExp = this.urlRegExp;
  76                                         messages.id = dijit.getUniqueId(this.declaredClass.replace(/\./g,"_"));
  77                                         dropDown.setContent(dropDown.title + "<hr>" + dojo.string.substitute(this.linkDialogTemplate, messages));
  78                                         dropDown.startup();
  79                                 },
  80
  81                                 setValue: function(args){
  82                                         // summary: callback from the dialog when user hits "set" button
  83                                         //TODO: prevent closing popup if the text is empty
  84                                         this._onCloseDialog();
  85                                         if(dojo.isIE){ //see #4151
  86                                                 var a = dojo.withGlobal(this.editor.window, "getAncestorElement", dijit._editor.selection, [this.tag]);
  87                                                 if(a){
  88                                                         dojo.withGlobal(this.editor.window, "selectElement", dijit._editor.selection, [a]);
  89                                                 }
  90                                         }
  91                                         args.tag = this.tag;
  92                                         args.refAttr = this.tag == 'img' ? 'src' : 'href';
  93                                         //TODO: textInput should be formatted by escapeXml
  94                                         var template = "<${tag} ${refAttr}='${urlInput}' _djrealurl='${urlInput}'" +
  95                                                 (args.tag == 'img' ? " alt='${textInput}'>" : ">${textInput}") +
  96                                                 "</${tag}>";
  97                                         this.editor.execCommand('inserthtml', dojo.string.substitute(template, args));
  98                                 },
  99
 100                                 _onCloseDialog: function(){
 101                                         // FIXME: IE is really messed up here!!
 102                                         if(dojo.isIE){
 103                                                 if("_savedSelection" in this){
 104                                                         var b = this._savedSelection;
 105                                                         delete this._savedSelection;
 106                                                         this.editor.focus();
 107                                                         var range = this.editor.document.selection.createRange();
 108                                                         range.moveToBookmark(b);
 109                                                         range.select();
 110                                                 }
 111                                         }else{
 112                                                 this.editor.focus();
 113                                         }
 114                                 },
 115
 116                                 _onOpenDialog: function(){
 117                                         var a = dojo.withGlobal(this.editor.window, "getAncestorElement", dijit._editor.selection, [this.tag]);
 118                                         var url, text;
 119                                         if(a){
 120                                                 url = a.getAttribute('_djrealurl');
 121                                                 text = this.tag == 'img' ? a.getAttribute('alt') : a.textContent || a.innerText;
 122                                                 dojo.withGlobal(this.editor.window, "selectElement", dijit._editor.selection, [a, true]);
 123                                         }else{
 124                                                 text = dojo.withGlobal(this.editor.window, dijit._editor.selection.getSelectedText);
 125                                         }
 126                                         // FIXME: IE is *really* b0rken
 127                                         if(dojo.isIE){
 128                                                 this._savedSelection = this.editor.document.selection.createRange().getBookmark();
 129                                         }
 130                                         this.dropDown.reset();
 131                                         this.dropDown.setValues({urlInput: url || '', textInput: text || ''});
 132                                         //dijit.focus(this.urlInput);
 133                                 }
 134                         }
 135                 );
 136
 137                 /* the following code registers my plugin */
 138                 dojo.subscribe(dijit._scopeName + ".Editor.getPlugin",null,function(o){
 139                         if(o.plugin){ return; }
 140                         if(o.args.name == "myPlugin"){
 141                                 return new myPlugin({});
 142                         }
 143                 });
 144         </script>
 145 </head>
 146 <body>
 147         <div dojoType="dijit.Editor" id="editor1" extraPlugins="['myPlugin']"><p>
 148         This editor should have my custom create link plugin
 149         </p></div>
 150 </body>
 151 </html>