javascript - summernote的plugin问题-PHP中文网问答

最近一个项目用到可编辑p，公司使用的是bootstrap作为主要框架，故选用了summernote插件
现需要实现自定义按钮功能，类似点击插入表情（我这是要点击插入一条预设规则、运算符等）
summernote给出了plugin，链接在此summernote。

也给出了实例，链接在此自定义plugin：hello
但是当我将代码原封不动搬下来的时候，得到的结果是报错：如图

那个renderer到底是什么？
我在这行前面加了一个console，这个summernote对象的具体情况如图所示

我的代码结构是这样的：

//先引入
$(document).ready(function() {
    setSummernote();
});
//初始化
function setSummernote(){
    $("#summernote").summernote({
        lang: 'zh-CN',
        height:300,
        focus:true,
        toolbar:[
            ['group', ['hello']]
        ]
    });
//此行报错，我不知道这个renderer是什么。
    var tmpl = $.summernote.renderer.getTemplate();
    var editor = $.summernote.eventHandler.getEditor();
    
    // add hello plugin 
    $.summernote.addPlugin({
      // plugin's name
      name: 'hello',
    
      init : function(layoutInfo) { // run init method when summernote was initialized
        // layoutInfo.holder() is current summernote's jquery instance.
        var $note = layoutInfo.holder();
    
        // you can use jquery custom event.
        $note.on('summernote.update', function(customEvent, nativeEvent) {
           var $boldButton = $(this).summernote('toolbar.get', 'bold');
           $boldButton.toggleClass('active').css({
             color : 'red'
           });
        });
    
        $note.on('summernote.blur', function(customEvent, nativeEvent) {
          var $boldButton = $(this).summernote('toolbar.get', 'bold');
          $boldButton.removeClass('active').css({
            color : 'inherit'
          });
        });          
        $note.summernote('insertText', 'plugin start.');
      },
              
      buttons: { // define button that be added in the toolbar
        // "hello" button (key is a button's name)
        hello: function () {
              
          // create button template 
          return tmpl.iconButton('fa fa-header', {
            // set event's name to used as callback when this button is clicked
            // add data-event='hello' in button element
            event : 'hello',
            title: 'hello',
            hide: true
          });
        }
      },
    
      events: { // events
        // run callback when hello button is clicked
        hello: function (event, editor, layoutInfo, value) {
          // Get current editable node
          var $editable = layoutInfo.editable();
    
          // Call insertText with 'hello'
          editor.insertText($editable, 'hello ');
              
          // or 
          layoutInfo.holder().summernote("insertText", "Hello");
        }
      }
    });
}