Summernote自定义按钮如何传递上下文和数据

3

我正在使用 Angular 中的 Summernote,我想创建一个自定义按钮。

我想将 listHit 作为参数传递给 customButton 中的 testBtn,像这样:'testBtn': this.customButton(context, listHit),但我不确定如何实现,因为函数看起来像这样:'testBtn': this.customButton,如果有帮助,感激不尽。谢谢。

我的自定义按钮大致如下。

  customButton(context) {    
    
    var listHit = ['One', 'Two', 'Tree'];
    
    const ui = ($ as any).summernote.ui;
    var i;
    var listHitHtml = "";
    for (i = 0; i < listHit.length; i++) {
      listHitHtml += "<li>" + listHit[i] + "</li>";
    }


    var button = ui.buttonGroup([
      ui.button({
        className: 'dropdown-toggle',
        contents: '<i class="fa fa-comments"/><span class="caret"></span>',
        tooltip: '@erp_colombia.Lang.Resource.conAvailableComments',
        data: {
          toggle: 'dropdown'
        }
      }),
      ui.dropdown({
        className: 'drop-default summernote-list',
        contents: "<div id=\"container-comentario\"><div id=\"dialog\" title=\"Comentarios\" ><h1 class=\"header-comentario\">" + 'Comment' + "</h1><ul id=\"liste-comentarios\"><ul>" + listHitHtml + "</ul></div></div>",
        callback: function ($dropdown) {
          $dropdown.find('li').each(function () {
            $(this).click(function () {
              context.invoke("editor.insertText", $(this).html() + "\n");
            });
          });
        }
      })
    ]);

    return button.render();   // return button as jquery object
  }

这是我的pdfmaker配置

  this.config = {
    placeholder: placeholder,
    shortcuts: false,
    disableDragAndDrop: true,
    //tabsize: 2,
    hint: {
      mentions: this.quoteCommentsForSummerNote,
      match: /\b(\w{1,})$/,
      search: function (keyword, callback) {
        callback($.grep(this.mentions, function (item: any) {
          return item.indexOf(keyword) == 0;
        }));
      },
      content: function (item) {
        return item;
      }
    },
    height: 200,
    toolbar: [
      ['myotherbutton', ['testBtn']],
    ],
    buttons: {
      'testBtn': this.customButton
    }
  }

这是我的 Angular HTML 代码:

您可以通过以下示例演练,我创建了一个列表,假设它来自一个服务,我想将此列表传递给 customButton。

  listStringFromDbService = ['one', 'two', 'three'];

https://stackblitz.com/edit/angular-summernote-demo-gdvvbn?file=src%2Fapp%2Fapp.component.ts

2个回答

2
我相信我已经理解了这个问题。
你可以将你的按钮声明改为一个返回按钮函数的函数。这样,在构造 Evernote 绑定到 testBtn 的函数之前,你就可以向它传递数据了。
更改函数声明(表达式或声明都可以,正如你所指出的那样)。
function customButtonGenerator(arr) {
  return function (context) {
    const ui = $.summernote.ui;
    const button = ui.button({
      contents: '<i class="note-icon-magic"></i> Hello',
      tooltip: 'Custom button',
      container: '.note-editor',
      className: 'note-btn',
      click: function () {
        context.invoke('editor.insertText', 'Hello from test btn!!! ' + arr);
      },
    });
    return button.render();
  };
};

那么当您创建UI配置时,可以生成按钮功能:

buttons: {
      testBtn: customButtonGenerator(this.listStringFromDbService),
    },

这里有一个更新的Stackblitz展示了一个可行的实例。


我可以改变它,但对我来说函数customButton(context)可行。我的问题是如何将一个项目列表传递到customButton函数中?谢谢您的帮助。 - J.C
1
啊,对不起。我完全误解了你的问题。一旦按钮知道这个列表,它最终应该做什么? - MPawlak
1
我更新了答案,假设您想在单击时将数组传递到调用方法中,但即使您正在执行其他操作,这也应该接近您想要的内容。 - MPawlak

0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接