dojox/editor/plugins/LocalImage.js

• Provides:

  • dojox.editor.plugins.LocalImage

• dojox.editor.plugins.LocalImage

  • type

    Function

  • chains:
    • dijit._editor.plugins.ImgLinkDialog: (prototype)
    • dijit._editor.plugins.ImgLinkDialog: (call)
  • summary

    This plugin provides an enhanced image link dialog that
    not only insert the online images, but upload the local image files onto
    to server then insert them as well.
    Dependencies:
    This plugin depends on dojox.form.FileUploader to upload the images on the local driver.
    Do the regression test whenever FileUploader is upgraded.
    
    uploadable [public] Boolean
    Indicate whether the user can upload a local image file onto the server.
    If it is set to true, the Browse button will be available.

• dojox.editor.plugins.LocalImage.uploadable

  • summary

• dojox.editor.plugins.LocalImage.uploadUrl

  • summary

• dojox.editor.plugins.LocalImage.baseImageUrl

  • summary

• dojox.editor.plugins.LocalImage.fileMask

  • summary

• dojox.editor.plugins.LocalImage.urlRegExp

  • summary

• dojox.editor.plugins.LocalImage._fileUploader

  • summary

• dojox.editor.plugins.LocalImage.htmlFieldName

  • summary

• dojox.editor.plugins.LocalImage._isLocalFile

  • summary

• dojox.editor.plugins.LocalImage._messages

  • summary

• dojox.editor.plugins.LocalImage._cssPrefix

  • summary

• dojox.editor.plugins.LocalImage._closable

  • summary

• dojox.editor.plugins.LocalImage.linkDialogTemplate

  • summary

• dojox.editor.plugins.LocalImage._initButton

  • type

    Function

  • source: [view]
      var _this = this,
       messages = this._messages = dojo.i18n.getLocalization("dojox.editor.plugins", "LocalImage");
    
      
      this.tag = "img";
      var dropDown = (this.dropDown = new dijit.TooltipDialog({
       title: messages[this.command + "Title"],
       onOpen: function(){
        _this._initialFileUploader();
        _this._onOpenDialog();
        dijit.TooltipDialog.prototype.onOpen.apply(this, arguments);
        setTimeout(function(){
         // Auto-select the text if it is not empty
         dijit.selectInputText(_this._urlInput.textbox);
         _this._urlInput.isLoadComplete = true;
        }, 0);
       },
       onClose: function(){
        dojo.disconnect(_this.blurHandler);
        _this.blurHandler = null;
        this.onHide();
       },
       onCancel: function(){
        setTimeout(dojo.hitch(_this, "_onCloseDialog"),0);
       }
      }));
    
      
      var label = this.getLabel(this.command),
       className = this.iconClassPrefix + " " + this.iconClassPrefix + this.command.charAt(0).toUpperCase() + this.command.substr(1),
       props = dojo.mixin({
         label: label,
         showLabel: false,
         iconClass: className,
         dropDown: this.dropDown,
         tabIndex: "-1"
        }, this.params || {});
    
      
      if(!dojo.isIE && (!dojo.isFF || dojo.isFF < 4)){
       // Workaround for Non-IE problem:
       // Safari 5: After the select-file dialog opens, the first time the user clicks anywhere (even on that dialog)
       // it's treated like a plain click on the page, and the tooltip dialog closes
       // FF & Chrome: the select-file dialog does not block the execution of JS
       props.closeDropDown = function(/*Boolean*/ focus){
        if(_this._closable){
         if(this._opened){
          dijit.popup.close(this.dropDown);
          if(focus){ this.focus(); }
          this._opened = false;
          this.state = "";
         }
        }
        setTimeout(function(){ _this._closable = true; }, 10);
       };
      }
    
      
      this.button = new dijit.form.DropDownButton(props);
    
      
      // Generate the RegExp of the ValidationTextBox from fileMask
      // *.jpg;*.png => /.*\.jpg|.*\.JPG|.*\.png|.*\.PNG/
      var masks = this.fileMask.split(";"),
       temp = "";
      dojo.forEach(masks, function(m){
       m = m.replace(/\./, "\\.").replace(/\*/g, ".*");
       temp += "|" + m + "|" + m.toUpperCase();
      });
      messages.urlRegExp = this.urlRegExp = temp.substring(1);
    
      
      if(!this.uploadable){
       messages["prePopuTextBrowse"] = ".";
      }
    
      
      messages.id = dijit.getUniqueId(this.editor.id);
      messages.uploadable = this.uploadable ? "inline" : "none";
      this._uniqueId = messages.id;
      this._setContent("

    " + dropDown.title + "

    " +
       dojo.string.substitute(this.linkDialogTemplate, messages));
      dropDown.startup();
    
      
      var urlInput = this._urlInput = dijit.byId(this._uniqueId + "_urlInput");
      this._textInput = dijit.byId(this._uniqueId + "_textInput");
      this._setButton = dijit.byId(this._uniqueId + "_setButton");
    
      
      if(urlInput){
       var pt = dijit.form.ValidationTextBox.prototype;
       urlInput = dojo.mixin(urlInput, {
        // Indicate if the widget is ready to validate the input text
        isLoadComplete: false,
        isValid: function(isFocused){
         if(this.isLoadComplete){
          return pt.isValid.apply(this, arguments);
         }else{
          return this.get("value").length > 0;
         }
        },
        reset: function(){
         this.isLoadComplete = false;
         pt.reset.apply(this, arguments);
        }
       });
    
       
       this.connect(urlInput, "onKeyDown", "_cancelFileUpload");
       this.connect(urlInput, "onChange", "_checkAndFixInput");
      }
      if(this._setButton){
       this.connect(this._setButton, "onClick", "_checkAndSetValue");
      }
      this._connectTagEvents();
  • summary

    Override _Plugin._initButton() to initialize DropDownButton and TooltipDialog.

  • tags:
  • chains:
    • dijit.TooltipDialog.prototype.onOpen: (call)
    • pt.isValid: (call)
    • pt.reset: (call)

• dojox.editor.plugins.LocalImage._initialFileUploader

  • type

    Function

  • source: [view]
      var fup = null,
       _this = this,
       widgetId = _this._uniqueId,
       fUpId = widgetId + "_browse",
       urlInput = _this._urlInput;
    
      
      if(_this.uploadable && !_this._fileUploader){
       fup = _this._fileUploader = new dojox.form.FileUploader({
        force: "html", // Noticed that SWF may cause browsers to crash sometimes
        uploadUrl: _this.uploadUrl,
        htmlFieldName: _this.htmlFieldName,
        uploadOnChange: false,
        selectMultipleFiles: false,
        showProgress: true
       }, fUpId);
    
       
       // TooltipDialog will call reset on all the widgets contained within it.
       // Have FileUploader be responsive to this call.
       fup.reset = function(){
        _this._isLocalFile = false;
        fup._resetHTML();
       };
    
       
       _this.connect(fup, "onClick", function(){
        urlInput.validate(false);
        if(!dojo.isIE && (!dojo.isFF || dojo.isFF < 4)){
         // Firefox (below v4), Chome and Safari have a strange behavior:
         // When the File Upload dialog is open, the browse div (FileUploader) will lose its focus
         // and triggers onBlur event. This event will cause the whole tooltip dialog
         // to be closed when the File Upload dialog is open. The popup dialog should hang up
         // the js executioin rather than triggering an event. IE does not have such a problem.
         _this._closable = false;
        }
       });
    
    
    
       
       _this.connect(fup, "onChange", function(data){
        _this._isLocalFile = true;
        urlInput.set("value", data[0].name); //Single selection
        urlInput.focus();
       });
    
       
       _this.connect(fup, "onComplete", function(data){
        var urlPrefix = _this.baseImageUrl;
        urlPrefix = urlPrefix && urlPrefix.charAt(urlPrefix.length - 1) == "/" ? urlPrefix : urlPrefix + "/";
        urlInput.set("value", urlPrefix + data[0].file); //Single selection
        _this._isLocalFile = false;
        _this._setDialogStatus(true);
        _this.setValue(_this.dropDown.get("value"));
       });
    
       
       _this.connect(fup, "onError", function(evtObject){
        // summary:
        //  Fires on errors
        console.log("Error occurred when uploading image file!");
        _this._setDialogStatus(true);
       });
      }
  • summary

    Initialize the FileUploader and connect up its events

  • tags:

• dojox.editor.plugins.LocalImage._checkAndFixInput

  • type

    Function

  • source: [view]
    define("dojox/editor/plugins/LocalImage", ["dojo", "dijit", "dojox", "dijit/_editor/plugins/LinkDialog", "dojox/form/FileUploader", "dojo/i18n", "i18n!dojox/editor/plugins/nls/LocalImage"], function(dojo, dijit, dojox) {
    
    
    dojo.declare("dojox.editor.plugins.LocalImage", dijit._editor.plugins.ImgLinkDialog, {
     // summary:
     //  This plugin provides an enhanced image link dialog that
     //  not only insert the online images, but upload the local image files onto
     //  to server then insert them as well.
     // Dependencies:
     //  This plugin depends on dojox.form.FileUploader to upload the images on the local driver.
     //  Do the regression test whenever FileUploader is upgraded.
    
     
     // uploadable [public] Boolean
     //  Indicate whether the user can upload a local image file onto the server.
     //  If it is set to true, the Browse button will be available.
     uploadable: false,
    
     
     // uploadUrl [public] String
     //  The url targeted for uploading. Both absolute and relative URLs are OK.
     uploadUrl: "",
    
     
     // baseImageUrl [public] String
     //  The prefix of the image url on the server.
     //  For example, an image is uploaded and stored at the following location
     //   http://www.myhost.com/images/uploads/test.jpg.
     //  When the image is uploaded, the server returns "uploads/test.jpg" as the
     //  relative path. So the baseImageUrl should be set to "http://www.myhost.com/images/"
     //  so that the client can retrieve the image from the server.
     //  If the image file is located on the same domain as that of the current web page,
     //  baseImageUrl can be a relative path. For example:
     //   baseImageUrl = images/
     //  and the server returns uploads/test.jpg
     //  The complete URL of the image file is images/upload/test.jpg
     baseImageUrl: "",
    
     
     // fileMask [public] String
     //  Specify the types of images that are allowed to be uploaded.
     //  Note that the type checking on server is also very important!
     fileMask: "*.jpg;*.jpeg;*.gif;*.png;*.bmp",
    
     
     // urlRegExp [protected] String
     //  Used to validate if the input is a valid image URL.
     urlRegExp: "",
    
     
     // _fileUploader [private] dojox.form.FileUploader
     //  The component to upload the local image file onto the server
     _fileUploader: null,
    
     
     // _fileUploader [private] htmlFieldName
     htmlFieldName:"uploadedfile",
    
     
     // _isLocalFile [private] Boolean
     //  Indicate if a local file is to be uploaded to the server
     //  If false, the text of _urlInput field is regarded as the
     //  URL of the online image
     _isLocalFile: false,
    
     
     // _messages [private] Array
     //  Contains i18n strings.
     _messages: "",
    
     
     // _cssPrefix [private] String
     //  The prefix of the CSS style
     _cssPrefix: "dijitEditorEilDialog",
    
     
     // _closable [private] Boolean
     //  Indicate if the tooltip dialog can be closed. Used to workaround Safari 5 bug
     //  where the file dialog doesn't pop up in modal until after the first click.
     _closable: true,
    
     
     // linkDialogTemplate [protected] String
     //  Over-ride for template since this is an enhanced image dialog.
     linkDialogTemplate: [
      "

    ", //

    ---

    breaks the dialog in IE6
      "

    ${prePopuTextUrl}${prePopuTextBrowse}

    ",
      "

    ",   "${url}",   "
    ",   "  "regExp='${urlRegExp}' title='${prePopuTextUrl}${prePopuTextBrowse}' selectOnClick='true' required='true' " +   "id='${id}_urlInput' name='urlInput' intermediateChanges='true' invalidMessage='${invalidMessage}' " +   "prePopuText='<${prePopuTextUrl}${prePopuTextBrowse}>'>",   "	",   " ${browse} ",   "
    ",   "${text}",   "
    ",   "  "name='textInput' intermediateChanges='true' selectOnClick='true' class='dijitEditorEilDialogField'>",   "
    ",   "	",   "
    ",   "${set}",   "

    "
     ].join(""),
    
    
     _initButton: function(){
      // summary:
      //  Override _Plugin._initButton() to initialize DropDownButton and TooltipDialog.
      // tags:
      //  protected
      var _this = this,
       messages = this._messages = dojo.i18n.getLocalization("dojox.editor.plugins", "LocalImage");
    
      
      this.tag = "img";
      var dropDown = (this.dropDown = new dijit.TooltipDialog({
       title: messages[this.command + "Title"],
       onOpen: function(){
        _this._initialFileUploader();
        _this._onOpenDialog();
        dijit.TooltipDialog.prototype.onOpen.apply(this, arguments);
        setTimeout(function(){
         // Auto-select the text if it is not empty
         dijit.selectInputText(_this._urlInput.textbox);
         _this._urlInput.isLoadComplete = true;
        }, 0);
       },
       onClose: function(){
        dojo.disconnect(_this.blurHandler);
        _this.blurHandler = null;
        this.onHide();
       },
       onCancel: function(){
        setTimeout(dojo.hitch(_this, "_onCloseDialog"),0);
       }
      }));
    
      
      var label = this.getLabel(this.command),
       className = this.iconClassPrefix + " " + this.iconClassPrefix + this.command.charAt(0).toUpperCase() + this.command.substr(1),
       props = dojo.mixin({
         label: label,
         showLabel: false,
         iconClass: className,
         dropDown: this.dropDown,
         tabIndex: "-1"
        }, this.params || {});
    
      
      if(!dojo.isIE && (!dojo.isFF || dojo.isFF < 4)){
       // Workaround for Non-IE problem:
       // Safari 5: After the select-file dialog opens, the first time the user clicks anywhere (even on that dialog)
       // it's treated like a plain click on the page, and the tooltip dialog closes
       // FF & Chrome: the select-file dialog does not block the execution of JS
       props.closeDropDown = function(/*Boolean*/ focus){
        if(_this._closable){
         if(this._opened){
          dijit.popup.close(this.dropDown);
          if(focus){ this.focus(); }
          this._opened = false;
          this.state = "";
         }
        }
        setTimeout(function(){ _this._closable = true; }, 10);
       };
      }
    
      
      this.button = new dijit.form.DropDownButton(props);
    
      
      // Generate the RegExp of the ValidationTextBox from fileMask
      // *.jpg;*.png => /.*\.jpg|.*\.JPG|.*\.png|.*\.PNG/
      var masks = this.fileMask.split(";"),
       temp = "";
      dojo.forEach(masks, function(m){
       m = m.replace(/\./, "\\.").replace(/\*/g, ".*");
       temp += "|" + m + "|" + m.toUpperCase();
      });
      messages.urlRegExp = this.urlRegExp = temp.substring(1);
    
      
      if(!this.uploadable){
       messages["prePopuTextBrowse"] = ".";
      }
    
      
      messages.id = dijit.getUniqueId(this.editor.id);
      messages.uploadable = this.uploadable ? "inline" : "none";
      this._uniqueId = messages.id;
      this._setContent("

    " + dropDown.title + "

    " +
       dojo.string.substitute(this.linkDialogTemplate, messages));
      dropDown.startup();
    
      
      var urlInput = this._urlInput = dijit.byId(this._uniqueId + "_urlInput");
      this._textInput = dijit.byId(this._uniqueId + "_textInput");
      this._setButton = dijit.byId(this._uniqueId + "_setButton");
    
      
      if(urlInput){
       var pt = dijit.form.ValidationTextBox.prototype;
       urlInput = dojo.mixin(urlInput, {
        // Indicate if the widget is ready to validate the input text
        isLoadComplete: false,
        isValid: function(isFocused){
         if(this.isLoadComplete){
          return pt.isValid.apply(this, arguments);
         }else{
          return this.get("value").length > 0;
         }
        },
        reset: function(){
         this.isLoadComplete = false;
         pt.reset.apply(this, arguments);
        }
       });
    
       
       this.connect(urlInput, "onKeyDown", "_cancelFileUpload");
       this.connect(urlInput, "onChange", "_checkAndFixInput");
      }
      if(this._setButton){
       this.connect(this._setButton, "onClick", "_checkAndSetValue");
      }
      this._connectTagEvents();
     },
    
     
     _initialFileUploader: function(){
      // summary:
      //  Initialize the FileUploader and connect up its events
      // tags:
      //  private
      var fup = null,
       _this = this,
       widgetId = _this._uniqueId,
       fUpId = widgetId + "_browse",
       urlInput = _this._urlInput;
    
      
      if(_this.uploadable && !_this._fileUploader){
       fup = _this._fileUploader = new dojox.form.FileUploader({
        force: "html", // Noticed that SWF may cause browsers to crash sometimes
        uploadUrl: _this.uploadUrl,
        htmlFieldName: _this.htmlFieldName,
        uploadOnChange: false,
        selectMultipleFiles: false,
        showProgress: true
       }, fUpId);
    
       
       // TooltipDialog will call reset on all the widgets contained within it.
       // Have FileUploader be responsive to this call.
       fup.reset = function(){
        _this._isLocalFile = false;
        fup._resetHTML();
       };
    
       
       _this.connect(fup, "onClick", function(){
        urlInput.validate(false);
        if(!dojo.isIE && (!dojo.isFF || dojo.isFF < 4)){
         // Firefox (below v4), Chome and Safari have a strange behavior:
         // When the File Upload dialog is open, the browse div (FileUploader) will lose its focus
         // and triggers onBlur event. This event will cause the whole tooltip dialog
         // to be closed when the File Upload dialog is open. The popup dialog should hang up
         // the js executioin rather than triggering an event. IE does not have such a problem.
         _this._closable = false;
        }
       });
    
    
    
       
       _this.connect(fup, "onChange", function(data){
        _this._isLocalFile = true;
        urlInput.set("value", data[0].name); //Single selection
        urlInput.focus();
       });
    
       
       _this.connect(fup, "onComplete", function(data){
        var urlPrefix = _this.baseImageUrl;
        urlPrefix = urlPrefix && urlPrefix.charAt(urlPrefix.length - 1) == "/" ? urlPrefix : urlPrefix + "/";
        urlInput.set("value", urlPrefix + data[0].file); //Single selection
        _this._isLocalFile = false;
        _this._setDialogStatus(true);
        _this.setValue(_this.dropDown.get("value"));
       });
    
       
       _this.connect(fup, "onError", function(evtObject){
        // summary:
        //  Fires on errors
        console.log("Error occurred when uploading image file!");
        _this._setDialogStatus(true);
       });
      }
     },
    
     
     _checkAndFixInput: function(){
      // summray:
      //  Over-ride the original method
      this._setButton.set("disabled", !this._isValid());
  • summary

• dojox.editor.plugins.LocalImage._isValid

  • type

    Function

  • source: [view]
    define("dojox/editor/plugins/LocalImage", ["dojo", "dijit", "dojox", "dijit/_editor/plugins/LinkDialog", "dojox/form/FileUploader", "dojo/i18n", "i18n!dojox/editor/plugins/nls/LocalImage"], function(dojo, dijit, dojox) {
    
    
    dojo.declare("dojox.editor.plugins.LocalImage", dijit._editor.plugins.ImgLinkDialog, {
     // summary:
     //  This plugin provides an enhanced image link dialog that
     //  not only insert the online images, but upload the local image files onto
     //  to server then insert them as well.
     // Dependencies:
     //  This plugin depends on dojox.form.FileUploader to upload the images on the local driver.
     //  Do the regression test whenever FileUploader is upgraded.
    
     
     // uploadable [public] Boolean
     //  Indicate whether the user can upload a local image file onto the server.
     //  If it is set to true, the Browse button will be available.
     uploadable: false,
    
     
     // uploadUrl [public] String
     //  The url targeted for uploading. Both absolute and relative URLs are OK.
     uploadUrl: "",
    
     
     // baseImageUrl [public] String
     //  The prefix of the image url on the server.
     //  For example, an image is uploaded and stored at the following location
     //   http://www.myhost.com/images/uploads/test.jpg.
     //  When the image is uploaded, the server returns "uploads/test.jpg" as the
     //  relative path. So the baseImageUrl should be set to "http://www.myhost.com/images/"
     //  so that the client can retrieve the image from the server.
     //  If the image file is located on the same domain as that of the current web page,
     //  baseImageUrl can be a relative path. For example:
     //   baseImageUrl = images/
     //  and the server returns uploads/test.jpg
     //  The complete URL of the image file is images/upload/test.jpg
     baseImageUrl: "",
    
     
     // fileMask [public] String
     //  Specify the types of images that are allowed to be uploaded.
     //  Note that the type checking on server is also very important!
     fileMask: "*.jpg;*.jpeg;*.gif;*.png;*.bmp",
    
     
     // urlRegExp [protected] String
     //  Used to validate if the input is a valid image URL.
     urlRegExp: "",
    
     
     // _fileUploader [private] dojox.form.FileUploader
     //  The component to upload the local image file onto the server
     _fileUploader: null,
    
     
     // _fileUploader [private] htmlFieldName
     htmlFieldName:"uploadedfile",
    
     
     // _isLocalFile [private] Boolean
     //  Indicate if a local file is to be uploaded to the server
     //  If false, the text of _urlInput field is regarded as the
     //  URL of the online image
     _isLocalFile: false,
    
     
     // _messages [private] Array
     //  Contains i18n strings.
     _messages: "",
    
     
     // _cssPrefix [private] String
     //  The prefix of the CSS style
     _cssPrefix: "dijitEditorEilDialog",
    
     
     // _closable [private] Boolean
     //  Indicate if the tooltip dialog can be closed. Used to workaround Safari 5 bug
     //  where the file dialog doesn't pop up in modal until after the first click.
     _closable: true,
    
     
     // linkDialogTemplate [protected] String
     //  Over-ride for template since this is an enhanced image dialog.
     linkDialogTemplate: [
      "

    ", //

    ---

    breaks the dialog in IE6
      "

    ${prePopuTextUrl}${prePopuTextBrowse}

    ",
      "

    ",   "${url}",   "
    ",   "  "regExp='${urlRegExp}' title='${prePopuTextUrl}${prePopuTextBrowse}' selectOnClick='true' required='true' " +   "id='${id}_urlInput' name='urlInput' intermediateChanges='true' invalidMessage='${invalidMessage}' " +   "prePopuText='<${prePopuTextUrl}${prePopuTextBrowse}>'>",   "	",   " ${browse} ",   "
    ",   "${text}",   "
    ",   "  "name='textInput' intermediateChanges='true' selectOnClick='true' class='dijitEditorEilDialogField'>",   "
    ",   "	",   "
    ",   "${set}",   "

    "
     ].join(""),
    
    
     _initButton: function(){
      // summary:
      //  Override _Plugin._initButton() to initialize DropDownButton and TooltipDialog.
      // tags:
      //  protected
      var _this = this,
       messages = this._messages = dojo.i18n.getLocalization("dojox.editor.plugins", "LocalImage");
    
      
      this.tag = "img";
      var dropDown = (this.dropDown = new dijit.TooltipDialog({
       title: messages[this.command + "Title"],
       onOpen: function(){
        _this._initialFileUploader();
        _this._onOpenDialog();
        dijit.TooltipDialog.prototype.onOpen.apply(this, arguments);
        setTimeout(function(){
         // Auto-select the text if it is not empty
         dijit.selectInputText(_this._urlInput.textbox);
         _this._urlInput.isLoadComplete = true;
        }, 0);
       },
       onClose: function(){
        dojo.disconnect(_this.blurHandler);
        _this.blurHandler = null;
        this.onHide();
       },
       onCancel: function(){
        setTimeout(dojo.hitch(_this, "_onCloseDialog"),0);
       }
      }));
    
      
      var label = this.getLabel(this.command),
       className = this.iconClassPrefix + " " + this.iconClassPrefix + this.command.charAt(0).toUpperCase() + this.command.substr(1),
       props = dojo.mixin({
         label: label,
         showLabel: false,
         iconClass: className,
         dropDown: this.dropDown,
         tabIndex: "-1"
        }, this.params || {});
    
      
      if(!dojo.isIE && (!dojo.isFF || dojo.isFF < 4)){
       // Workaround for Non-IE problem:
       // Safari 5: After the select-file dialog opens, the first time the user clicks anywhere (even on that dialog)
       // it's treated like a plain click on the page, and the tooltip dialog closes
       // FF & Chrome: the select-file dialog does not block the execution of JS
       props.closeDropDown = function(/*Boolean*/ focus){
        if(_this._closable){
         if(this._opened){
          dijit.popup.close(this.dropDown);
          if(focus){ this.focus(); }
          this._opened = false;
          this.state = "";
         }
        }
        setTimeout(function(){ _this._closable = true; }, 10);
       };
      }
    
      
      this.button = new dijit.form.DropDownButton(props);
    
      
      // Generate the RegExp of the ValidationTextBox from fileMask
      // *.jpg;*.png => /.*\.jpg|.*\.JPG|.*\.png|.*\.PNG/
      var masks = this.fileMask.split(";"),
       temp = "";
      dojo.forEach(masks, function(m){
       m = m.replace(/\./, "\\.").replace(/\*/g, ".*");
       temp += "|" + m + "|" + m.toUpperCase();
      });
      messages.urlRegExp = this.urlRegExp = temp.substring(1);
    
      
      if(!this.uploadable){
       messages["prePopuTextBrowse"] = ".";
      }
    
      
      messages.id = dijit.getUniqueId(this.editor.id);
      messages.uploadable = this.uploadable ? "inline" : "none";
      this._uniqueId = messages.id;
      this._setContent("

    " + dropDown.title + "

    " +
       dojo.string.substitute(this.linkDialogTemplate, messages));
      dropDown.startup();
    
      
      var urlInput = this._urlInput = dijit.byId(this._uniqueId + "_urlInput");
      this._textInput = dijit.byId(this._uniqueId + "_textInput");
      this._setButton = dijit.byId(this._uniqueId + "_setButton");
    
      
      if(urlInput){
       var pt = dijit.form.ValidationTextBox.prototype;
       urlInput = dojo.mixin(urlInput, {
        // Indicate if the widget is ready to validate the input text
        isLoadComplete: false,
        isValid: function(isFocused){
         if(this.isLoadComplete){
          return pt.isValid.apply(this, arguments);
         }else{
          return this.get("value").length > 0;
         }
        },
        reset: function(){
         this.isLoadComplete = false;
         pt.reset.apply(this, arguments);
        }
       });
    
       
       this.connect(urlInput, "onKeyDown", "_cancelFileUpload");
       this.connect(urlInput, "onChange", "_checkAndFixInput");
      }
      if(this._setButton){
       this.connect(this._setButton, "onClick", "_checkAndSetValue");
      }
      this._connectTagEvents();
     },
    
     
     _initialFileUploader: function(){
      // summary:
      //  Initialize the FileUploader and connect up its events
      // tags:
      //  private
      var fup = null,
       _this = this,
       widgetId = _this._uniqueId,
       fUpId = widgetId + "_browse",
       urlInput = _this._urlInput;
    
      
      if(_this.uploadable && !_this._fileUploader){
       fup = _this._fileUploader = new dojox.form.FileUploader({
        force: "html", // Noticed that SWF may cause browsers to crash sometimes
        uploadUrl: _this.uploadUrl,
        htmlFieldName: _this.htmlFieldName,
        uploadOnChange: false,
        selectMultipleFiles: false,
        showProgress: true
       }, fUpId);
    
       
       // TooltipDialog will call reset on all the widgets contained within it.
       // Have FileUploader be responsive to this call.
       fup.reset = function(){
        _this._isLocalFile = false;
        fup._resetHTML();
       };
    
       
       _this.connect(fup, "onClick", function(){
        urlInput.validate(false);
        if(!dojo.isIE && (!dojo.isFF || dojo.isFF < 4)){
         // Firefox (below v4), Chome and Safari have a strange behavior:
         // When the File Upload dialog is open, the browse div (FileUploader) will lose its focus
         // and triggers onBlur event. This event will cause the whole tooltip dialog
         // to be closed when the File Upload dialog is open. The popup dialog should hang up
         // the js executioin rather than triggering an event. IE does not have such a problem.
         _this._closable = false;
        }
       });
    
    
    
       
       _this.connect(fup, "onChange", function(data){
        _this._isLocalFile = true;
        urlInput.set("value", data[0].name); //Single selection
        urlInput.focus();
       });
    
       
       _this.connect(fup, "onComplete", function(data){
        var urlPrefix = _this.baseImageUrl;
        urlPrefix = urlPrefix && urlPrefix.charAt(urlPrefix.length - 1) == "/" ? urlPrefix : urlPrefix + "/";
        urlInput.set("value", urlPrefix + data[0].file); //Single selection
        _this._isLocalFile = false;
        _this._setDialogStatus(true);
        _this.setValue(_this.dropDown.get("value"));
       });
    
       
       _this.connect(fup, "onError", function(evtObject){
        // summary:
        //  Fires on errors
        console.log("Error occurred when uploading image file!");
        _this._setDialogStatus(true);
       });
      }
     },
    
     
     _checkAndFixInput: function(){
      // summray:
      //  Over-ride the original method
      this._setButton.set("disabled", !this._isValid());
     },
    
     
     _isValid: function(){
      // summray:
      //  Invalid cases: URL is not ended with the suffix listed
      return this._urlInput.isValid();
  • summary

• dojox.editor.plugins.LocalImage._cancelFileUpload

  • type

    Function

  • source: [view]
      this._fileUploader.reset();
      this._isLocalFile = false;
  • summary

• dojox.editor.plugins.LocalImage._checkAndSetValue

  • type

    Function

  • source: [view]
    define("dojox/editor/plugins/LocalImage", ["dojo", "dijit", "dojox", "dijit/_editor/plugins/LinkDialog", "dojox/form/FileUploader", "dojo/i18n", "i18n!dojox/editor/plugins/nls/LocalImage"], function(dojo, dijit, dojox) {
    
    
    dojo.declare("dojox.editor.plugins.LocalImage", dijit._editor.plugins.ImgLinkDialog, {
     // summary:
     //  This plugin provides an enhanced image link dialog that
     //  not only insert the online images, but upload the local image files onto
     //  to server then insert them as well.
     // Dependencies:
     //  This plugin depends on dojox.form.FileUploader to upload the images on the local driver.
     //  Do the regression test whenever FileUploader is upgraded.
    
     
     // uploadable [public] Boolean
     //  Indicate whether the user can upload a local image file onto the server.
     //  If it is set to true, the Browse button will be available.
     uploadable: false,
    
     
     // uploadUrl [public] String
     //  The url targeted for uploading. Both absolute and relative URLs are OK.
     uploadUrl: "",
    
     
     // baseImageUrl [public] String
     //  The prefix of the image url on the server.
     //  For example, an image is uploaded and stored at the following location
     //   http://www.myhost.com/images/uploads/test.jpg.
     //  When the image is uploaded, the server returns "uploads/test.jpg" as the
     //  relative path. So the baseImageUrl should be set to "http://www.myhost.com/images/"
     //  so that the client can retrieve the image from the server.
     //  If the image file is located on the same domain as that of the current web page,
     //  baseImageUrl can be a relative path. For example:
     //   baseImageUrl = images/
     //  and the server returns uploads/test.jpg
     //  The complete URL of the image file is images/upload/test.jpg
     baseImageUrl: "",
    
     
     // fileMask [public] String
     //  Specify the types of images that are allowed to be uploaded.
     //  Note that the type checking on server is also very important!
     fileMask: "*.jpg;*.jpeg;*.gif;*.png;*.bmp",
    
     
     // urlRegExp [protected] String
     //  Used to validate if the input is a valid image URL.
     urlRegExp: "",
    
     
     // _fileUploader [private] dojox.form.FileUploader
     //  The component to upload the local image file onto the server
     _fileUploader: null,
    
     
     // _fileUploader [private] htmlFieldName
     htmlFieldName:"uploadedfile",
    
     
     // _isLocalFile [private] Boolean
     //  Indicate if a local file is to be uploaded to the server
     //  If false, the text of _urlInput field is regarded as the
     //  URL of the online image
     _isLocalFile: false,
    
     
     // _messages [private] Array
     //  Contains i18n strings.
     _messages: "",
    
     
     // _cssPrefix [private] String
     //  The prefix of the CSS style
     _cssPrefix: "dijitEditorEilDialog",
    
     
     // _closable [private] Boolean
     //  Indicate if the tooltip dialog can be closed. Used to workaround Safari 5 bug
     //  where the file dialog doesn't pop up in modal until after the first click.
     _closable: true,
    
     
     // linkDialogTemplate [protected] String
     //  Over-ride for template since this is an enhanced image dialog.
     linkDialogTemplate: [
      "

    ", //

    ---

    breaks the dialog in IE6
      "

    ${prePopuTextUrl}${prePopuTextBrowse}

    ",
      "

    ",   "${url}",   "
    ",   "  "regExp='${urlRegExp}' title='${prePopuTextUrl}${prePopuTextBrowse}' selectOnClick='true' required='true' " +   "id='${id}_urlInput' name='urlInput' intermediateChanges='true' invalidMessage='${invalidMessage}' " +   "prePopuText='<${prePopuTextUrl}${prePopuTextBrowse}>'>",   "	",   " ${browse} ",   "
    ",   "${text}",   "
    ",   "  "name='textInput' intermediateChanges='true' selectOnClick='true' class='dijitEditorEilDialogField'>",   "
    ",   "	",   "
    ",   "${set}",   "

    "
     ].join(""),
    
    
     _initButton: function(){
      // summary:
      //  Override _Plugin._initButton() to initialize DropDownButton and TooltipDialog.
      // tags:
      //  protected
      var _this = this,
       messages = this._messages = dojo.i18n.getLocalization("dojox.editor.plugins", "LocalImage");
    
      
      this.tag = "img";
      var dropDown = (this.dropDown = new dijit.TooltipDialog({
       title: messages[this.command + "Title"],
       onOpen: function(){
        _this._initialFileUploader();
        _this._onOpenDialog();
        dijit.TooltipDialog.prototype.onOpen.apply(this, arguments);
        setTimeout(function(){
         // Auto-select the text if it is not empty
         dijit.selectInputText(_this._urlInput.textbox);
         _this._urlInput.isLoadComplete = true;
        }, 0);
       },
       onClose: function(){
        dojo.disconnect(_this.blurHandler);
        _this.blurHandler = null;
        this.onHide();
       },
       onCancel: function(){
        setTimeout(dojo.hitch(_this, "_onCloseDialog"),0);
       }
      }));
    
      
      var label = this.getLabel(this.command),
       className = this.iconClassPrefix + " " + this.iconClassPrefix + this.command.charAt(0).toUpperCase() + this.command.substr(1),
       props = dojo.mixin({
         label: label,
         showLabel: false,
         iconClass: className,
         dropDown: this.dropDown,
         tabIndex: "-1"
        }, this.params || {});
    
      
      if(!dojo.isIE && (!dojo.isFF || dojo.isFF < 4)){
       // Workaround for Non-IE problem:
       // Safari 5: After the select-file dialog opens, the first time the user clicks anywhere (even on that dialog)
       // it's treated like a plain click on the page, and the tooltip dialog closes
       // FF & Chrome: the select-file dialog does not block the execution of JS
       props.closeDropDown = function(/*Boolean*/ focus){
        if(_this._closable){
         if(this._opened){
          dijit.popup.close(this.dropDown);
          if(focus){ this.focus(); }
          this._opened = false;
          this.state = "";
         }
        }
        setTimeout(function(){ _this._closable = true; }, 10);
       };
      }
    
      
      this.button = new dijit.form.DropDownButton(props);
    
      
      // Generate the RegExp of the ValidationTextBox from fileMask
      // *.jpg;*.png => /.*\.jpg|.*\.JPG|.*\.png|.*\.PNG/
      var masks = this.fileMask.split(";"),
       temp = "";
      dojo.forEach(masks, function(m){
       m = m.replace(/\./, "\\.").replace(/\*/g, ".*");
       temp += "|" + m + "|" + m.toUpperCase();
      });
      messages.urlRegExp = this.urlRegExp = temp.substring(1);
    
      
      if(!this.uploadable){
       messages["prePopuTextBrowse"] = ".";
      }
    
      
      messages.id = dijit.getUniqueId(this.editor.id);
      messages.uploadable = this.uploadable ? "inline" : "none";
      this._uniqueId = messages.id;
      this._setContent("

    " + dropDown.title + "

    " +
       dojo.string.substitute(this.linkDialogTemplate, messages));
      dropDown.startup();
    
      
      var urlInput = this._urlInput = dijit.byId(this._uniqueId + "_urlInput");
      this._textInput = dijit.byId(this._uniqueId + "_textInput");
      this._setButton = dijit.byId(this._uniqueId + "_setButton");
    
      
      if(urlInput){
       var pt = dijit.form.ValidationTextBox.prototype;
       urlInput = dojo.mixin(urlInput, {
        // Indicate if the widget is ready to validate the input text
        isLoadComplete: false,
        isValid: function(isFocused){
         if(this.isLoadComplete){
          return pt.isValid.apply(this, arguments);
         }else{
          return this.get("value").length > 0;
         }
        },
        reset: function(){
         this.isLoadComplete = false;
         pt.reset.apply(this, arguments);
        }
       });
    
       
       this.connect(urlInput, "onKeyDown", "_cancelFileUpload");
       this.connect(urlInput, "onChange", "_checkAndFixInput");
      }
      if(this._setButton){
       this.connect(this._setButton, "onClick", "_checkAndSetValue");
      }
      this._connectTagEvents();
     },
    
     
     _initialFileUploader: function(){
      // summary:
      //  Initialize the FileUploader and connect up its events
      // tags:
      //  private
      var fup = null,
       _this = this,
       widgetId = _this._uniqueId,
       fUpId = widgetId + "_browse",
       urlInput = _this._urlInput;
    
      
      if(_this.uploadable && !_this._fileUploader){
       fup = _this._fileUploader = new dojox.form.FileUploader({
        force: "html", // Noticed that SWF may cause browsers to crash sometimes
        uploadUrl: _this.uploadUrl,
        htmlFieldName: _this.htmlFieldName,
        uploadOnChange: false,
        selectMultipleFiles: false,
        showProgress: true
       }, fUpId);
    
       
       // TooltipDialog will call reset on all the widgets contained within it.
       // Have FileUploader be responsive to this call.
       fup.reset = function(){
        _this._isLocalFile = false;
        fup._resetHTML();
       };
    
       
       _this.connect(fup, "onClick", function(){
        urlInput.validate(false);
        if(!dojo.isIE && (!dojo.isFF || dojo.isFF < 4)){
         // Firefox (below v4), Chome and Safari have a strange behavior:
         // When the File Upload dialog is open, the browse div (FileUploader) will lose its focus
         // and triggers onBlur event. This event will cause the whole tooltip dialog
         // to be closed when the File Upload dialog is open. The popup dialog should hang up
         // the js executioin rather than triggering an event. IE does not have such a problem.
         _this._closable = false;
        }
       });
    
    
    
       
       _this.connect(fup, "onChange", function(data){
        _this._isLocalFile = true;
        urlInput.set("value", data[0].name); //Single selection
        urlInput.focus();
       });
    
       
       _this.connect(fup, "onComplete", function(data){
        var urlPrefix = _this.baseImageUrl;
        urlPrefix = urlPrefix && urlPrefix.charAt(urlPrefix.length - 1) == "/" ? urlPrefix : urlPrefix + "/";
        urlInput.set("value", urlPrefix + data[0].file); //Single selection
        _this._isLocalFile = false;
        _this._setDialogStatus(true);
        _this.setValue(_this.dropDown.get("value"));
       });
    
       
       _this.connect(fup, "onError", function(evtObject){
        // summary:
        //  Fires on errors
        console.log("Error occurred when uploading image file!");
        _this._setDialogStatus(true);
       });
      }
     },
    
     
     _checkAndFixInput: function(){
      // summray:
      //  Over-ride the original method
      this._setButton.set("disabled", !this._isValid());
     },
    
     
     _isValid: function(){
      // summray:
      //  Invalid cases: URL is not ended with the suffix listed
      return this._urlInput.isValid();
     },
    
     
     _cancelFileUpload: function(){
      this._fileUploader.reset();
      this._isLocalFile = false;
     },
    
     
     _checkAndSetValue: function(){
      // summray:
      //  Determine if a local file is to be uploaded.
      //  If a local file is to be uploaded, do not close the dialog
      //  until the file uploading is finished. Else, insert the image directly into the editor.
      // tags:
      //  private
      if(this._fileUploader && this._isLocalFile){
       this._setDialogStatus(false);
       this._fileUploader.upload();
      }else{
       this.setValue(this.dropDown.get("value"));
      }
  • summary

• dojox.editor.plugins.LocalImage._setDialogStatus

  • type

    Function

  • parameters:
    • value: (typeof Boolean)
  • source: [view]
      this._urlInput.set("disabled", !value);
      this._textInput.set("disabled", !value);
      this._setButton.set("disabled", !value);
  • summary

• dojox.editor.plugins.LocalImage.destroy

  • type

    Function

  • source: [view]
      this.inherited(arguments);
      if(this._fileUploader){
       this._fileUploader.destroy();
       this._fileUploader = null;
      }
  • summary

    Cleanup of the plugin.

• dojox.editor.plugins.LocalImage.tag

  • summary

• dojox.editor.plugins.LocalImage.dropDown

  • summary

• dojox.editor.plugins.LocalImage._opened

  • summary

• dojox.editor.plugins.LocalImage.state

  • summary

• dojox.editor.plugins.LocalImage.button

  • summary

• dojox.editor.plugins.LocalImage._uniqueId

  • summary

• dojox.editor.plugins.LocalImage._urlInput

  • summary

• dojox.editor.plugins.LocalImage._textInput

  • summary

• dojox.editor.plugins.LocalImage._setButton

  • summary

• dojox.editor.plugins.LocalImage.isLoadComplete

  • summary

• urlInput.isLoadComplete

  • summary

• urlInput.isValid

  • type

    Function

  • parameters:
    • isFocused: (typeof )
  • source: [view]
         if(this.isLoadComplete){
          return pt.isValid.apply(this, arguments);
         }else{
          return this.get("value").length > 0;
         }
  • chains:
    • pt.isValid: (call)
  • summary

• urlInput.reset

  • type

    Function

  • source: [view]
         this.isLoadComplete = false;
         pt.reset.apply(this, arguments);
  • chains:
    • pt.reset: (call)
  • summary

• urlInput.reset.isLoadComplete

  • summary

• name

  • summary

• o.plugin

  • summary

• dojox.editor.plugins

  • type

    Object

  • summary

• dojox.editor

  • type

    Object

  • summary

• dojox

  • type

    Object

  • summary