Summernote 自定义按钮和对话框

Question

我想在 Summernote 工具栏上添加一个自定义按钮，它会打开一个对话框，其中包含一个 URL 文本框和几个设置复选框。然后我想使用对话框中的信息来抓取网页并对内容进行处理。最终目标是将抓取的内容从光标所在的位置开始放置到编辑器中。我已经搜索并找到了一些有关创建自定义按钮的代码，但没有任何实现对话框的可靠示例。我浏览了summernote.js 代码来查看“插入图像”对话框是如何工作的，这让我非常困惑。到目前为止，我得到的测试代码在下面的代码块中。提前感谢任何可以帮助我解决问题的人。

                var showModalDialog = function(){
                    alert("Not Implemented");
                };
                
                
                var AddWiki = function(context) {
                    var ui = $.summernote.ui;
                    var button = ui.button({
                        contents: '<i class="fa fa-plus"/> Add Wiki',
                        tooltip: "Set a New Wiki",
                        class: "btn-primary",
                        click: function() {
                          showModalDialog();
                        }
                    });
                    return button.render();
                };              
                
                
                $(".tw-summernote-instance textarea").summernote({
                      airMode: false,
                      dialogsInBody: false,
                      toolbar: [["mybutton", ["customButton"]]],
                      buttons: {
                        customButton: AddWiki
                      },
                      callbacks: {
                        onInit: function(e) {
                          var o = e.toolbar[0];
                          jQuery(o)
                            .find("button:first")
                            .addClass("btn-primary");
                        }
                      }
                    });

Answer 1

我找到了一个很好、简单的例子来说明我想做的事情。代码如下：

(function(factory) {
  /* global define */
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // Node/CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals
    factory(window.jQuery);
  }
}(function($) {
  $.extend($.summernote.plugins, {

    'synonym': function(context) {
      var self = this;
      var ui = $.summernote.ui;

      var $editor = context.layoutInfo.editor;
      var options = context.options;

      context.memo('button.synonym', function() {
        return ui.button({
          contents: '<i class="fa fa-snowflake-o">',
          tooltip: 'Create Synonym',
          click: context.createInvokeHandler('synonym.showDialog')
        }).render();
      });

      self.initialize = function() {
        var $container = options.dialogsInBody ? $(document.body) : $editor;

        var body = '<div class="form-group">' +
          '<label>Add Synonyms (comma - , - seperated</label>' +
          '<input id="input-synonym" class="form-control" type="text" placeholder="Insert your synonym" />'
        '</div>'
        var footer = '<button href="#" class="btn btn-primary ext-synonym-btn">OK</button>';

        self.$dialog = ui.dialog({
          title: 'Create Synonym',
          fade: options.dialogsFade,
          body: body,
          footer: footer
        }).render().appendTo($container);
      };

      // You should remove elements on `initialize`.
      self.destroy = function() {
        self.$dialog.remove();
        self.$dialog = null;
      };

      self.showDialog = function() {
        self
          .openDialog()
          .then(function(data) {
            ui.hideDialog(self.$dialog);
            context.invoke('editor.restoreRange');
            self.insertToEditor(data);

            console.log("dialog returned: ", data)
          })
          .fail(function() {
            context.invoke('editor.restoreRange');
          });
      };

      self.openDialog = function() {
        return $.Deferred(function(deferred) {
          var $dialogBtn = self.$dialog.find('.ext-synonym-btn');
          var $synonymInput = self.$dialog.find('#input-synonym')[0];

          ui.onDialogShown(self.$dialog, function() {
            context.triggerEvent('dialog.shown');

            $dialogBtn
              .click(function(event) {
                event.preventDefault();

                deferred.resolve({
                  synonym: $synonymInput.value
                });
              });
          });

          ui.onDialogHidden(self.$dialog, function() {
            $dialogBtn.off('click');

            if (deferred.state() === 'pending') {
              deferred.reject();
            }
          });

          ui.showDialog(self.$dialog);
        });
      };

      this.insertToEditor = function(data) {
        console.log("synonym: " + data.synonym)

        var dataArr = data.synonym.split(',');
        var restArr = dataArr.slice(1);

        var $elem = $('<span>', {
          'data-function': "addSynonym",
          'data-options': '[' + restArr.join(',').trim() + ']',
          'html': $('<span>', {
            'text': dataArr[0],
            'css': {
              backgroundColor: 'yellow'
            }
          })
        });

        context.invoke('editor.insertNode', $elem[0]);
      };
    }
  });
}));