javascript - yii2 Summernote 小部件向工具栏添加新按钮

Question

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

use marqu3s\summernote\Summernote;

这是我在 Summernote 示例之后的 View 中的代码:

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);
?>

View 使用编辑器呈现，但不显示按钮:

如果我检查工具栏，我可以看到 div:

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

我尝试了几个小时但没有成功，

欢迎任何想法

Answer 1

如 http://summernote.org/deep-dive/#using-button-with-options 中所述，您必须将其命名为函数，而不是字符串。

引用:参见https://github.com/summernote/summernote/blob/44157226d362c6aec1b0b6ff0fcdd40573147b61/src/js/bs3/module/Buttons.js#L643看看 Summernote 如何处理它。