2017-07-29 126 views
0

我想一個新的自定義按鈕添加到summernote部件與YII2使用包裝:yii2 summernote小工具添加新的按鈕,工具欄

use marqu3s\summernote\Summernote; 

這是我在summernote樣品以下視圖代碼:

http://summernote.org/deep-dive/

  $form->field($model, 'text_body')->widget(Summernote::className(), [ 
      'clientOptions' => [ 
       'id' => 'ysk-summernote', 
       'toolbar' => [ 
        ['mybutton', ['hello']], 
        ['undo', ['undo']], 
        ['redo', ['redo']], 
        ['insert', ['link', 'hr']], 
        ['style', ['bold', 'italic', 'underline', 'clear']], 
        ['font', ['strikethrough', 'superscript', 'subscript']], 
        ['fontsize', ['fontsize']], 
        ['color', ['color']], 
        ['para', ['ul', 'ol', 'paragraph']], 
        ['height', ['height']], 
        ['view', ['codeview']], 
        ['help', ['help']], 
       ], 
       'height' => 400, 
       'buttons' => ['hello' => 'HelloButton'], 
       ] 
      ] 
     ); 
     ?>  

我也加入以下JS:

<?php 
$script = <<< JS 
var HelloButton = function (context) { 
    var ui = $.summernote.ui; 

    // create button 
    var button = ui.button({ 
    contents: '<i class="fa fa-child"/> Hello', 
    tooltip: 'hello', 
    click: function() { 
     // invoke insertText method with 'hello' on editor module. 
     context.invoke('editor.insertText', 'hello'); 
    } 
    }); 

    return button.render(); // return button as jquery object 
}   
JS; 
$this->registerJs($script); 
?> 

視圖渲染與編輯器,但沒有顯示該按鈕:

如果我檢查的工具欄,我可以看到,雖然在div:

<div class="note-btn-group btn-group note-mybutton"></div> 

我嘗試了幾個小時,但沒有運氣,

任何想法表示歡迎

回答

相關問題