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

Question

我正在使用 summernote angular 我想创建一个自定义按钮。

我想像这样将 customButton 中的 listHit 作为参数传递 '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

在这里你可以fiddle举个例子我创建了一个列表，我们假设它来自一个服务我想把这个列表传递给customButton

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

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

Answer 1

我想我明白了。

您可以将按钮声明更改为 returns 按钮功能的函数。这样你就可以在构造 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),
    },

Here's an updated stackblitz 显示一个工作示例。

Answer 2

我已经像这样修改了 MPawlak 的答案，其中有一个下拉菜单，您可以在其中单击要添加的项目。此外，我将参数传递给仍然有效的自定义按钮。感谢 MPawlak

https://stackblitz.com/edit/angular-summernote-demo-yq8t4t