Cleanup HTML of pasted content in summernote editor

Summernote produces clean HTML when creating content within summernote. However, if you paste text from Gmail and other sources you might get a lot of HTML bloat. I’d like to cleanup the HTML at the time of pasting HTML text. I know how to clean up the HTML, but not how to put that back into summernote.

Related Paste content as plain text in summernote editor describes how to strip all HTML, then use ‘insertText’ in the onPaste callback. I verified this to work OK.

Summernote does not have a method to insert HTML instead of plain text. There is a ‘insertNode’ method to add a single DOM element, but I can’t use that to insert an HTML text string.

Code ready so far:

$('#summernote').summernote({
    // other stuff,
    callbacks: {
        onPaste: function(e) {
            var event = e.originalEvent;
            if(!event) {
                event = e;
            }
            if(!event) {
                event = window;
            }
            if(event.clipboardData) {
                var html = event.clipboardData.getData('text/html');
                if(html) {
                    event.preventDefault();
                    console.log('BEFORE: '+ html);
                    html = html.replace(/ (style|class)="[^"]*"/g, '');
                    console.log('AFTER: '+ html);
                    // can't use the following because it inserts HTML as text:
                    //$('#summernote').summernote('insertText', html);
                }
            }
        }
    }
});

Example of bloated text from Gmail:

<html>
<body>
<!--StartFragment--><span style="color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">2. Click<span class="Apple-converted-space"> </span></span><b style="color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-style: initial; text-decoration-color: initial;">Submit</b><span style="color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">.</span><br style="color: rgb(0, 0, 0); font-family: arial, sans-serif; font-size: 12.8px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-style: initial; text-decoration-color: initial;"><!--EndFragment-->
</body>
</html>

Example cleaned up HTML text I’d like to insert into summernote:

<html>
<body>
<!--StartFragment-->2. Click <b>Submit</b>.<br><!--EndFragment-->
</body>
</html>

I have the cleanup code ready. Now I need to know how to insert the modified HTML text into summernote. Any idea?