Summernote Initialization

addButton.js

var btnExample = 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: [
        ['font-style', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
        ['misc', ['undo', 'redo']],
        ['height', ['height']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['insert', ['link', 'picture', 'video','table']],
        ['bootstrap', ['example']],
        ['hr', ['hr']],
        ['code', ['codeview', 'fullscreen']],
        ['help', ['help']],

    ],
    buttons: {
        example: btnExample,
    }
});

addCollapseButton.js

function addCollapseButton() {
    let dropCount = Math.round(Math.random() * 1000);
    var HTMLstring = "";
    HTMLstring += `
<br>&nbsp;<a class="btn btn-dark" data-toggle="collapse" href="#codeDrop${dropCount}" role="button" aria-expanded="false" aria-controls="collapse${dropCount}">See The Code</a>&nbsp;
<div class="collapse" id="codeDrop${dropCount}"><pre><div class="alert alert-light" role="alert">
</div></pre>
</div>&nbsp;<br>
`;

    getCursor();
    $('#summernote').summernote('pasteHTML', HTMLstring);
}

summernoteFullButton.js

// Since this is a global variable you must declare this before your summernote initialization code
var collapseBtn = function (context) {
    var ui = $.summernote.ui;

    var button = ui.button({
        contents: `<a onclick='addCollapseButton()'><i class="fab fa-bootstrap fa2x"></i> Buttons</a>`,
        tooltip: 'Collapse Button',
    });

    return button.render();
}


$("#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'],
  
    toolbar: [
        ['font-style', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
        ['misc', ['undo', 'redo']],
        ['height', ['height']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['insert', ['link', 'picture', 'video','table']],
        ['hr', ['hr']],
        ['code', ['codeview', 'fullscreen']],
        ['help', ['help']],
        ['thisisaname', ['customBtn']],
    ],
    buttons: {
        customBtn: collapseBtn,
    }
});


// Credit : sword fish
// https://stackoverflow.com/a/60038527/14465032
function getCursor() {
    $('#Content').summernote('editor.saveRange');
    $('#Content').summernote('editor.restoreRange');
    $('#Content').summernote('editor.focus');
}


function addCollapseButton() {
    let dropCount = Math.round(Math.random() * 1000);
    var HTMLstring = "";
    HTMLstring += `
<br>&nbsp;<a class="btn btn-dark" data-toggle="collapse" href="#codeDrop${dropCount}" role="button" aria-expanded="false" aria-controls="collapse${dropCount}">See The Code</a>&nbsp;
<div class="collapse" id="codeDrop${dropCount}"><pre><div class="alert alert-light" role="alert">
</div></pre>
</div>&nbsp;<br>
`;

    getCursor();
    $('#summernote').summernote('pasteHTML', HTMLstring);
}

summernoteInitilization.js

$("#summernote").summernote({
    toolbar: [
        ['font-style', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
        ['misc', ['undo', 'redo']],
        ['height', ['height']],
        ['font', ['strikethrough', 'superscript', 'subscript']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['insert', ['link', 'picture', 'video','table']],
        ['bootstrap', ['example']],
        ['hr', ['hr']],
        ['code', ['codeview', 'fullscreen']],
        ['help', ['help']],

    ],
    buttons: {
        example: btnExample,
    }
});