在summernote中实现自定义对话框的角度

Question

我设法创建一个自定义按钮。但是我找不到如何创建自定义对话框来添加一些用户输入的方法

这是我当前用于简单自定义按钮的代码：

summernoteConf = {
  popover: {
      image: [
        ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
        ['float', ['floatLeft', 'floatRight', 'floatNone']],
        ['remove', ['removeMedia']]
      ],
      link: [
        ['link', ['linkDialogShow', 'unlink']]
      ],
      air: [
        ['color', ['color']],
        ['font', ['bold', 'underline', 'clear']],
        ['para', ['ul', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture']]
      ]
    },
    placeholder: '',
    tabsize: 2,
    height: 100,
    buttons: {},
    toolbar: [
        ['mybutton', ['hello']],
        // [groupName, [list of button]]
        ['misc', ['codeview', 'undo', 'redo']],
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
        ['fontsize', [ 'fontsize', 'color']],
        ['para', ['style0', 'ul', 'ol', 'paragraph', 'height']],
        ['insert', ['table', 'picture', 'link', 'video', 'hr']]
    ]

  };
 ngOnInit(){
  var HelloButton = function (context) {
          var ui = ($ as any).summernote.ui;

          // create button
          var button = ui.button({
            contents: '<i class="fa fa-child"/> Hello',
            tooltip: 'hello',
            click: function () {
              // invoke insertText method with 'hello' on editor module.
              context.invoke('editor.insertText', 'hello');
            }
          });

          return button.render();   // return button as jquery object
        }
        this.summernoteConf.buttons = {
          hello: HelloButton
        };
   }

现在，我希望有一个对话框输入，以便在HelloButton中添加一些用户输入。我该怎么办？