javascriptnicedit

Nicedit.js - cannot add custom button


I adopted code snippet from here - just changed my custom button icon path, but the button doesn't appear. There are no errors in the console.

/**
* nicExample
* @description: An example button plugin for nicEdit
* @requires: nicCore, nicPane, nicAdvancedButton
* @author: Brian Kirchoff
* @version: 0.9.0
*/

/* START CONFIG */
jQuery("document").ready(function(){
  debugger;
  var nicExampleOptions = {
    buttons : {
      'example' : {name : __('Some alt text for the button'), type : 'nicEditorExampleButton'}
    }, iconFiles : {'example' : '/assets/emoticons/aa.gif'}
  };

  var nicEditorExampleButton = nicEditorButton.extend({   
    mouseClick : function() {
      alert('The example save button icon has been clicked!');
    }
  });

  nicEditors.registerPlugin(nicPlugin,nicExampleOptions);
});

Also I add my custom button name to editor button list:

  this.instantiate_nicedit_for_textarea = function(textArea){
    var nic_editor = new nicEditor({buttonList : ['bold','italic','underline','strikethrough','example'], iconsPath : '/assets/nicEditorIcons.gif'})

    nic_editor.addInstance(textArea.id); 

    var topbar_id = $(textArea).prevAll('div.widget_topbar').last().children('ul').children('li.nic_panel').attr('id');
    nic_editor.setPanel(topbar_id);
  };

UPDATE: Firefox 18.02, Chrome 22.0.1229.94


Solution

  • tracing into nicEdit code I found that buttons actually appear on the screen when setPanel() API function is being called.

    setPanel() draws standard buttons, then it passes 'panel' event to fireEvent() API function which then invokes loadPanel(), which in turn calls addButton(), which tests button.type by evaluating it:

    addButton : function(buttonName,options,noOrder) {
      var button = options.buttons[buttonName];
      var type = (button['type']) ? eval('(typeof('+button['type']+') == "undefined") ? null : '+button['type']+';') : nicEditorButton;
    
      // <== here type is null, cause I defined button['type'] as local variable in separate file
    
      var hasButton = bkLib.inArray(this.buttonList,buttonName);
      if(type && (hasButton || this.ne.options.fullPanel)) {
        this.panelButtons.push(new type(this.panelElm,buttonName,options,this.ne));
        if(!hasButton) {
          this.buttonList.push(buttonName);
        }
      }
    }, 
    

    in the snippet above the code eval('(typeof('+button['type']+') == "undefined") returnes true as I defined the button type as a local variable:

    var nicEditorExampleButton = nicEditorButton.extend({   
        mouseClick : function() {
          alert('The example save button icon has been clicked!');
        }
      });
    

    The button appeared as soon as I defined the button type as global:

    nicEditorExampleButton = nicEditorButton.extend({   
      mouseClick : function() {
        alert('The example save button icon has been clicked!');
      }
    });
    

    I think type existance which nicEdit does should perform more clear and reliable way to prevent global namespace pollution, maybe as of (typeof(button['type']) == "undefined")