Javascript Nicedit.js-无法添加自定义按钮

我采用了来自的代码片段-刚刚更改了自定义按钮图标路径，但按钮没有出现。控制台中没有错误

/**
* 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);
});

我还将自定义按钮名称添加到编辑器按钮列表：

  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);
  };

---

更新：Firefox 18.02，Chrome 22.0.1229.94

基于保存按钮插件，您的代码应该是这样的：

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

---

作为最佳实践，我建议您将此代码添加到一个单独的文件中，并确保在

nicEdit.js

之后加载。然后，您可以将按钮添加到实例的buttonList中。

通过跟踪nicEdit代码，我发现在调用setPanel（）API函数时，按钮实际上会出现在屏幕上

setPanel（）绘制标准按钮，然后将“panel”事件传递给fireEvent（）API函数，该函数随后调用loadPanel（），loadPanel（）反过来调用addButton（），该函数通过对button.type求值来测试button.type：

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);
    }
  }
}, 

当我将按钮类型定义为全局时，按钮立即出现：

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

---

我认为nicEdit所做的类型存在应该以更清晰可靠的方式防止全局命名空间污染，可能从

（typeof（button['type']）==“undefined”）

我的nicElement加载过程是通过以下函数完成的：

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');

}))

其中

textareaExample

是textarea的id

将您的按钮名称（在我的例子中是

示例

）添加到

按钮列表

应该会添加您的按钮

因此，看看哪里有新的

nicEditor（）

可以看到一些加载选项的示例。
可以将行“buttonList”更新为

用于显示按钮
在文件js main中（示例）

}))
 谢谢你的回答，但这无助于我解决问题。好的。这段代码适用于我的niceEditor基本配置和文档化配置。+1我已经很好地使用了你的答案和它的工作原理。关于如何在按钮上添加图像，我有更多的问题。因为上面没有显示图像toolbar@SatishSharma目前，我还没有找到一种简单的方法将图像添加到按钮中。
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');

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`

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}