4

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

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

4

4 回答 4

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中。

于 2013-02-18T02:17:22.303 回答
2

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

于 2013-02-18T10:36:46.280 回答
0

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

});

textareaExampletextarea的id在哪里。

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

所以看看你在哪里有新的nicEditor();

加载选项的一些示例nicEdit可以在这里看到。

于 2016-12-07T10:25:54.247 回答
0

可以，将“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 主文件中显示按钮（示例）

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}

});

于 2018-04-07T10:10:48.903 回答