Summernote codeblock button

Question

I want to make a button in Summernote that creates a box where I can put in some code bits.

Like this:

It works, but I can't put tekst outside the box now.

This is my code:

javascript:

    var HelloButton = function (context) {
        var ui = $.summernote.ui;
  
        // create button
        var button = ui.button({
            contents: 'Code block',
            tooltip: 'hello',
            click: function () {
    
                $('#notes').summernote('code', '<pre><code class="html">Place your code here.</code></pre>');
    }
  });

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

$('#notes').summernote({
    
    minHeight: 200,
                toolbar: [
					['style', ['style']],
                    ['mybutton', ['hello']],
					['font', ['bold', 'italic', 'underline', 'clear']],
					['para', ['ul', 'ol']],
					['height', ['height']],
					['insert', ['link', 'picture']],
					['view', ['fullscreen', 'codeview']],
					['help', ['help']]
				], 
                
                buttons: {
                    hello: HelloButton
                }
});

html:

<textarea name="note" id="notes">

</textarea>

Someone who knows how to fix this?

Answer 1

Solved the issue. Had to use 'editor.pasteHTML' instead of 'code'.