Skip to content

Custom Button (Dropdown) #31

@mcinano

Description

@mcinano

Hi
I'm trying to implement a custom button into my summernote toolbar. Using mpowaga/meteor-autoform-summernote.

My Schema refers to autoform and summernote:

autoform: {
  afFieldInput: {
    type: 'summernote',
    class: 'editor', // optional
    settings: SummernoteConfig.description // summernote options goes here
  },
}

my config is

SummernoteConfig = {};

var ObjectInsertButton = function (context) {
var ui = $.summernote.ui;
var buttonGroup = ui.buttonGroup([
  ui.button({
    contents: '<i class="fa fa-external-link"/><span class="caret"></span>',
    tooltip: 'Add an object from your universe',
    data:{
    toggle: 'dropdown'
  }
}),
ui.dropdown({
  className: 'dropdown-style',
    contents: "<ol><li>hello</li><li>hello europe</li><li>hello europe</li></ol>",
    callback: function ($dropdown) {
      $dropdown.find('li').each(function () {
        $(this).click(function() {
          context.invoke('editor.insertText', 'hello');
        });
      });
    }
})
]);

 return buttonGroup.render();   // return button as query object
};

SummernoteConfig.description = {
height: 250,
toolbar: [
  // [groupName, [list of button]]
  ['paragraph',['style']],
  ['style', ['bold', 'italic', 'underline', 'clear']],
  ['color', ['color']],
  ['para', ['ul', 'ol', 'paragraph']],
  ['mayouga',['objectinsertbtn']]
],
buttons: {
  objectinsertbtn: ObjectInsertButton
}
};

when invoking the click event context is undefined.

What do i have to do? Help appreciated.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions