Nicedit.js - cannot add custom button

Question

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

Answer 1

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")

Answer 2

Based on save button plugin, this how your code should look:

var nicExampleOptions = {
    buttons : {
        'example' : {name : __('Example'), type : 'nicEditorExampleButton'}
    }
};

var nicEditorExampleButton = nicEditorButton.extend({
    init : function() {
        // your init code
    },
    mouseClick : function() {
        alert('hallo!'); // Your code here
    }
});

nicEditors.registerPlugin(nicPlugin,nicExampleOptions);

As a best practice, I sugest you add this code in a separated file, and make sure that is loaded after nicEdit.js. Then, you can add the button to your instance's buttonList.

Answer 3

My nicElement loading process is done by this function :

bkLib.onDomLoaded(function () {
new nicEditor({buttonList: ['bold', 'italic', 'underline', 'left', 'center', 'right', 'ol', 'ul', 'fontSize', 'fontFamily', 'fontFormat', 'superscript', 'subscript', 'indent', 'outdent', 'link', 'unlink', 'striketrhough', 'forecolor', 'bgcolor', 'image', 'upload', 'xhtml','example']}).panelInstance('textareaExample');

});

where textareaExample is the id of the textarea.

Adding your button name (in my case example) to the buttonList should add your button.

So look where you have new nicEditor();

Some examples of nicEdit loading options may be seen here.

Answer 4

Can, Update line "buttonList" to

buttonList : ['save','example','bold','italic','underline','left','center','right','justify','ol','ul','fontSize','fontFamily','fontFormat','indent','outdent','image','upload','link','unlink','forecolor','bgcolor'],`enter code here`

for show button in file js main (example)

var nicEditorConfig = bkClass.extend({
buttons : {
    'test' : {name : __('Click to Test'), command : 'Test'},
    'bold' : {name : __('Click to Bold'), command : 'Bold', tags : ['B','STRONG'], css : {'font-weight' : 'bold'}, key : 'b'},
    'italic' : {name : __('Click to Italic'), command : 'Italic', tags : ['EM','I'], css : {'font-style' : 'italic'}, key : 'i'},
    'underline' : {name : __('Click to Underline'), command : 'Underline', tags : ['U'], css : {'text-decoration' : 'underline'}, key : 'u'},
    'left' : {name : __('Left Align'), command : 'justifyleft', noActive : true},
    'center' : {name : __('Center Align'), command : 'justifycenter', noActive : true},
    'right' : {name : __('Right Align'), command : 'justifyright', noActive : true},
    'justify' : {name : __('Justify Align'), command : 'justifyfull', noActive : true},
    'ol' : {name : __('Insert Ordered List'), command : 'insertorderedlist', tags : ['OL']},
    'ul' :  {name : __('Insert Unordered List'), command : 'insertunorderedlist', tags : ['UL']},
    'subscript' : {name : __('Click to Subscript'), command : 'subscript', tags : ['SUB']},
    'superscript' : {name : __('Click to Superscript'), command : 'superscript', tags : ['SUP']},
    'strikethrough' : {name : __('Click to Strike Through'), command : 'strikeThrough', css : {'text-decoration' : 'line-through'}},
    'removeformat' : {name : __('Remove Formatting'), command : 'removeformat', noActive : true},
    'indent' : {name : __('Indent Text'), command : 'indent', noActive : true},
    'outdent' : {name : __('Remove Indent'), command : 'outdent', noActive : true},
    'hr' : {name : __('Horizontal Rule'), command : 'insertHorizontalRule', noActive : true}
},
iconsPath : '../nicEditorIcons.gif',
buttonList : ['save','example','bold','italic','underline','left','center','right','justify','ol','ul','fontSize','fontFamily','fontFormat','indent','outdent','image','upload','link','unlink','forecolor','bgcolor'],
iconList : {"bgcolor":1,"forecolor":2,'test':3,"bold":3,"center":4,"hr":5,"indent":6,"italic":7,"justify":8,"left":9,"ol":10,"outdent":11,"removeformat":12,"right":13,"save":24,"strikethrough":15,"subscript":16,"superscript":17,"ul":18,"underline":19,"image":20,"link":21,"unlink":22,"close":23,"arrow":25}

});