$('#summernote').summernote({
  toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]
});

toolbar: [
  ['style', ['style']],
  ['font', ['bold', 'underline', 'clear']],
  ['fontname', ['fontname']],
  ['color', ['color']],
  ['para', ['ul', 'ol', 'paragraph']],
  ['table', ['table']],
  ['insert', ['link', 'picture', 'video']],
  ['view', ['fullscreen', 'codeview', 'help']],
],

$('#summernote').summernote({
  popover: {
    air: [
      ['color', ['color']],
      ['font', ['bold', 'underline', 'clear']]
    ]
  }
});

popover: {
  image: [
    ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
    ['float', ['floatLeft', 'floatRight', 'floatNone']],
    ['remove', ['removeMedia']]
  ],
  link: [
    ['link', ['linkDialogShow', 'unlink']]
  ],
  table: [
    ['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
    ['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
  ],
  air: [
    ['color', ['color']],
    ['font', ['bold', 'underline', 'clear']],
    ['para', ['ul', 'paragraph']],
    ['table', ['table']],
    ['insert', ['link', 'picture']]
  ]
}

$('#summernote').summernote({
  blockquoteBreakingLevel: 2
});

$('#summernote').summernote({
  styleTags: [
    'p',
        { title: 'Blockquote', tag: 'blockquote', className: 'blockquote', value: 'blockquote' },
        'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
	],
  });

{
     tag : 'tag name ',
     title : 'dropdown item title',
     style : 'dropdown item style',
     className : 'applyed element class name and dropdown item className',
     value : 'Value to apply when clicked'
}

$('#summernote').summernote({
  fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New']
});

$('#summernote').summernote({
  fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Merriweather'],
  fontNamesIgnoreCheck: ['Merriweather']
});

$('#summernote').summernote({
  fontSizeUnits: ['px', 'pt']
});

$('#summernote').summernote({
  lineHeights: ['0.2', '0.3', '0.4', '0.5', '0.6', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0']
});

$('#summernote').summernote({
  placeholder: 'write here...'
});

$('#summernote').summernote({
  dialogsInBody: true
});

$('#summernote').summernote({
  dialogsFade: true  // Add fade effect on dialogs
});

$('#summernote').summernote({
  disableDragAndDrop: true
});

$('#summernote').summernote({
  shortcuts: false
});

$('#summernote').summernote({
  tabDisable: false
});

$('#summernote').summernote({
  codeviewFilter: false,
  codeviewIframeFilter: true
});

$('#summernote').summernote({
  codeviewFilterRegex: 'custom-regex',
  codeviewIframeWhitelistSrc: ['my-own-domainname']
});

$('#summernote').summernote();

$('#summernote').summernote('editor.insertText', 'hello world'));

$('#summernote').summernote('insertText', 'hello world');

$('#summernote').summernote('codeview.toggle');

var range = $('#summernote').summernote('createRange');

$('#summernote').summernote('disable');

$('#summernote').summernote('enable');

$('#summernote').summernote({
  spellCheck: true
});

$('#summernote').summernote({
  disableGrammar: false
});

$('#summernote').summernote('focus');

$('#summernote').summernote('fullscreen.toggle');

$('#summernote').summernote('fullscreen.isFullscreen');

$.summernote.interface;

if ($('#summernote').summernote('isEmpty')) {
  alert('editor content is empty');
}

$('#summernote').summernote('reset');

$('#summernote').summernote('saveRange');

$('#summernote').summernote('saveRange');
// move cursor and select another
$('#summernote').summernote('restoreRange');

$('#summernote').summernote('undo');
$('#summernote').summernote('redo');

// @param {String} color
$('#summernote').summernote('backColor', 'red');

// @param {String} color
$('#summernote').summernote('foreColor', 'blue');

$('#summernote').summernote('bold');
$('#summernote').summernote('italic');
$('#summernote').summernote('underline');
$('#summernote').summernote('strikethrough');

// @param {String} fontName
$('#summernote').summernote('fontName', 'Arial');

// @param {Number} font size - unit is determined by selected font size unit.
$('#summernote').summernote('fontSize', 20);

// @param {String} font size unit - defaults to px.
$('#summernote').summernote('fontSizeUnit', 'pt');

$('#summernote').summernote('removeFormat');

$('#summernote').summernote('superscript');
$('#summernote').summernote('subscript');

$('#summernote').summernote('formatH2');
$('#summernote').summernote('formatH6');

$('#summernote').summernote('formatPara');

$('#summernote').summernote('indent');
$('#summernote').summernote('outdent');

$('#summernote').summernote('insertOrderedList');

$('#summernote').summernote('insertUnorderedList');

$('#summernote').summernote('insertParagraph');

$('#summernote').summernote('justifyLeft');
$('#summernote').summernote('justifyRight');
$('#summernote').summernote('justifyCenter');
$('#summernote').summernote('justifyFull');

// @param {Number} line height - unit is px
$('#summernote').summernote('lineHeight', 20);

// @param {String} text - link text
// @param {String} url - link url
// @param {Boolean} isNewWindow - whether link's target is new window or not
$('#summernote').summernote('createLink', {
  text: "This is the Summernote's Official Site",
  url: 'http://summernote.org',
  isNewWindow: true
});

$('#summernote').summernote('unlink');

// @param {String} url
// @param {String|Function} filename - optional
$('#summernote').summernote('insertImage', url, filename);

$('#summernote').summernote('insertImage', url, function ($image) {
  $image.css('width', $image.width() / 3);
  $image.attr('data-filename', 'retriever');
});

var node = document.createElement('div');
// @param {Node} node
$('#summernote').summernote('insertNode', node);

// @param {String} text
$('#summernote').summernote('insertText', 'Hello, world');

// @param {String} HTML string
var HTMLstring = '<div><p>Hello, world</p><p>Summernote can insert HTML string</p></div>';
$('#summernote').summernote('pasteHTML', HTMLstring);

const rng = $('#summernote').summernote('editor.getLastRange');

const range = $.summernote.range;  // range utility
// set my custom range
$('#summernote').summernote('editor.setLastRange', range.createFromNodeAfter(node).select());

const range = $.summernote.range;  // range utility

const rng = range.create(startContainer, startOffset, endContainer, endOffset)

// or

const rng = range.create() //  is equals range.createFromSelection()

const rng = range.createFromNode(node)

const rng = range.createFromNodeBefore(node)

const rng = range.createFromNodeAfter(node)

const rng = range.createFromSelection(node)

// onChange callback
$('#summernote').summernote({
  callbacks: {
    onChange: function(contents, $editable) {
      console.log('onChange:', contents, $editable);
    }
  }
});

// summernote.change
$('#summernote').on('summernote.change', function(we, contents, $editable) {
  console.log('summernote\'s content is changed.');
});

// onEnter callback
$('#summernote').summernote({
  callbacks: {
    onEnter: function() {
      console.log('Enter/Return key pressed');
    }
  }
});

// summernote.enter
$('#summernote').on('summernote.enter', function() {
  console.log('Enter/Return key pressed');
});

// onFocus callback
$('#summernote').summernote({
  callbacks: {
    onFocus: function() {
      console.log('Editable area is focused');
    }
  }
});

// summernote.focus
$('#summernote').on('summernote.focus', function() {
  console.log('Editable area is focused');
});

// onBlur callback
$('#summernote').summernote({
  callbacks: {
    onBlur: function() {
      console.log('Editable area loses focus');
    }
  }
});

// summernote.blur
$('#summernote').on('summernote.blur', function() {
  console.log('Editable area loses focus');
});

// onBlurCodeview callback
$('#summernote').summernote({
  callbacks: {
    onBlurCodeview: function() {
      console.log('Codeview area loses focus');
    }
  }
});

// summernote.blur.codeview
$('#summernote').on('summernote.blur.codeview', function() {
  console.log('Codeview area loses focus');
});

// onImageLinkInsert callback
$('#summernote').summernote({
  callbacks: {
    onImageLinkInsert: function(url) {
      // url is the image url from the dialog
      $img = $('<img>').attr({ src: url })
      $summernote.summernote('insertNode', $img[0]);
    }
  }
});

// summernote.image.link.insert
$('#summernote').on('summernote.image.link.insert', function(we, url) {
  // url is the image url from the dialog
  $img = $('<img>').attr({ src: url })
  $summernote.summernote('insertNode', $img[0]);
});

// onImageUpload callback
$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      // upload image to server and create imgNode...
      $summernote.summernote('insertNode', imgNode);
    }
  }
});

// summernote.image.upload
$('#summernote').on('summernote.image.upload', function(we, files) {
  // upload image to server and create imgNode...
  $summernote.summernote('insertNode', imgNode);
});

// onInit callback
$('#summernote').summernote({
  callbacks: {
    onInit: function() {
      console.log('Summernote is launched');
    }
  }
});

// summernote.init
$('#summernote').on('summernote.init', function() {
  console.log('Summernote is launched');
});

// onKeyup callback
$('#summernote').summernote({
  callbacks: {
    onKeyup: function(e) {
      console.log('Key is released:', e.keyCode);
    }
  }
});

// summernote.keyup
$('#summernote').on('summernote.keyup', function(we, e) {
  console.log('Key is released:', e.keyCode);
});

// onKeydown callback
$('#summernote').summernote({
  callbacks: {
    onKeydown: function(e) {
      console.log('Key is downed:', e.keyCode);
    }
  }
});

// summernote.keydown
$('#summernote').on('summernote.keydown', function(we, e) {
  console.log('Key is downed:', e.keyCode);
});

// onPaste callback
$('#summernote').summernote({
  callbacks: {
    onPaste: function(e) {
      console.log('Called event paste');
    }
  }
});

// summernote.paste
$('#summernote').on('summernote.paste', function(e) {
  console.log('Called event paste');
});

var HelloButton = function (context) {
  var ui = $.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
}

$('.summernote').summernote({
  toolbar: [
    ['mybutton', ['hello']]
  ],

  buttons: {
    hello: HelloButton
  }
});

$('.summernote').summernote({
  icons: {
    align: '<svg [...]>[...]</svg>',
    // [...]
  }
});

this.initialize = function () {
  // create button
  var button = ui.button({
    className: 'note-btn-bold',
    contents: '<i class="fa fa-bold">',
    click: function (e) {
      context.invoke('editor.bold'); // invoke bold method of a module named editor
    }
  });

  // generate jQuery element from button instance.
  this.$button = button.render();
  $toolbar.append(this.$button);
}

this.destroy = function () {
  this.$button.remove();
  this.$button = null;
}

// AirPopover's shouldInitialize
this.shouldInitialize = function () {
  return options.airMode && !list.isEmpty(options.popover.air);
};

// Module Name is AutoLink
// @param {Object} context - states of editor
var AutoLink = function (context) {

  // you can get current editor's elements from layoutInfo
  var layoutInfo = context.layoutInfo;
  var $editor = layoutInfo.editor;
  var $editable = layoutInfo.editable;
  var $toolbar = layoutInfo.toolbar;

  // ui is a set of renderers to build ui elements.
  var ui = $.summernote.ui;

  // this method will be called when editor is initialized by $('..').summernote();
  // You can attach events and created elements on editor elements(eg, editable, ...).
  this.initialize = function () {
    // create button
    var button = ui.button({
      className: 'note-btn-bold',
      contents: '<i class="fa fa-bold">',
      click: function (e) {
        // invoke bold method of a module named editor
        context.invoke('editor.bold');
      }
    });

    // generate jQuery element from button instance.
    this.$button = button.render();
    $toolbar.append(this.$button);
  }

  // this method will be called when editor is destroyed by $('..').summernote('destroy');
  // You should detach events and remove elements on `initialize`.
  this.destroy = function () {
    this.$button.remove();
    this.$button = null;
  }
};

$(".summernote").summernote({
  modules: {
    myModule: MyModule
  }
});

$(".summernote").summernote("myModule.method", 'hello');

// src/mymodule.js
$.extend($.summernote.plugins, {
  myModule: function (context) {
    // define module
    ...
  }
});

$('.note-status-output').html(
  '<div class="alert alert-danger">' +
    'This is an error using a Bootstrap alert that has been restyled to fit here.' +
  '</div>'
);

$('.note-status-output').html(
  'Text Information'
);