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 関数に渡します。この 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');

});

textareaExampleテキストエリアのIDはどこにありますか。

ボタン名 (私の場合はexample) をbuttonList追加すると、ボタンが追加されます。

だから、あなたが新しいものを持っているところを見てくださいnicEditor();

nicEdit読み込みオプションの例をいくつかここで見ることができます。

于 2016-12-07T10:25:54.247 に答える