Question

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

/**
* 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

Answer 1

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

setPanel（）绘制标准按钮，然后将'panel'事件传递给 fireEvent（） API函数，然后调用 loadPanel（），它又调用 addButton（），通过评估它来测试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);
    }
  }
},

代码eval('(typeof('+button['type']+') == "undefined")上方代码段中的

返回true，因为我将按钮类型定义为局部变量：

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

一旦我将按钮类型定义为全局按钮，就会出现按钮：

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

我认为nicEdit做的类型存在应该执行更加清晰可靠的方法来防止全局名称空间污染，可能是(typeof(button['type']) == "undefined")

Answer 2

基于保存按钮插件，您的代码应如下所示：

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 。

Answer 3

我的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。

将您的按钮名称（在我的情况下为example）添加到buttonList应添加按钮。

请查看新nicEditor();

的位置

可能会看到nicEdit加载选项的一些示例here。

Answer 4

可以，将“buttonList”更新为

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`

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

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}

}）;

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

4 个答案: