Basic example

jsPanel.create({
    content:     '<div class="sn-editor"></div>',
    contentSize: '750 400',
    headerTitle: 'jsPanel with Summernote Editor',
    theme:       'primary',
    position:    'center-top 0 70',
    callback: function (panel) {
        this.content.style.padding = 0;
        $('.sn-editor', this.content).summernote({
            height: 350 // contentSize.height - 50
        });
        $('.note-toolbar, .note-editor').css({borderRadius: 0});
    },
    resizeit: {
        minWidth: 750,
        resize: function (panel) {
            resizeEditor(panel);
        }
    },
    onmaximized: function (panel) {
        resizeEditor(panel);
    },
    onnormalized: function (panel) {
        resizeEditor(panel);
    }
});

// function to resize the editor area whenever panel is resized using mouse or maximize/normalize methods
function resizeEditor(panel) {
    var h = parseInt(panel.content.style.height) - 50;
    $('.note-editable', panel.content).css('height', h);
}

Notes:

  • Summernote makes use of bootstrap modals. Those modals get a z-index that doesn't work with jsPanel. Therefore summernote.js is modified to disable the modal backdrop:
    // the following summernote.js code (around line 2056)
    showDialog: function ($dialog) {
      $dialog.modal('show');
    },
    
    // is replaced with
    showDialog: function ($dialog) {
        $dialog.modal({
            show: true,
            backdrop: false
        });
    },