summernote的plugin问题

发布于 2022-09-01 19:04:40 字数 3067 浏览 14 评论 0

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

也给出了实例,链接在此自定义plugin:hello
但是当我将代码原封不动搬下来的时候,得到的结果是报错:如图
clipboard.png
那个renderer到底是什么?
我在这行前面加了一个console,这个summernote对象的具体情况如图所示

clipboard.png

我的代码结构是这样的:

//先引入
$(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");
        }
      }
    });
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

骄兵必败 2022-09-08 19:04:40

答案是:0.5.8这个版本不支持renderer
此贴终结

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文