yii2 summernote小部件向工具栏添加新按钮

时间:2017-07-29 00:33:10

标签: javascript yii2 summernote

我正在尝试使用包装器在YII2中为summernote小部件添加一个新的自定义按钮:

use marqu3s\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>

我试了好几个小时但没有运气,

欢迎任何想法

1 个答案:

答案 0 :(得分:0)

http://summernote.org/deep-dive/#using-button-with-options所述,您必须将其命名为function,而不是string

参考:请参阅https://github.com/summernote/summernote/blob/44157226d362c6aec1b0b6ff0fcdd40573147b61/src/js/bs3/module/Buttons.js#L643以了解summernote如何处理它。