How to add custom styles for header tags in summernote

Question

I have a requirement of creating custom h1 tag button in summernote with custom styles applied to it.I have created a custom button for header h1 but am not sure on how to add custom style to it.I want to add custom inline styles of font-style and font-family to all header tags.I have to send the data with styles on save so adding a css class is also not feasible.Below is the code

  var HelloButton = function (context) {
  var ui          = $.summernote.ui;
  // create button
  var button = ui.button({
    contents: '<h1/>H1',
    tooltip: 'Custom H1',
    click: function () {
      var range = context.invoke('editor.createRange');
      // invoke insertText method with 'hello' on editor module.
      var h1 = context.invoke('editor.formatH1');
      // $(h1).text(range.toString());
      context.invoke('editor.styleFromNode','h1');
    }
  });

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

How can I add custom inline styles for the custom buttons I have created.

Thanks in advance :)

Answer 1

You have add the css style in inline header element.

contents: '<h1 style= "font-size:10px">H1</h1>',

or

cssClass: customStyle

.customStyle{font-size:10px}