Summernote 代码块按钮

Question

我想在 Summernote 中创建一个按钮，创建一个框，我可以在其中放入一些代码位。

像这样：

它可以工作，但我现在不能将 tekst 放在盒子外面。

这是我的代码：

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>

有人知道如何解决这个问题吗？

Answer 1

问题已解决。必须使用 'editor.pasteHTML' 而不是 'code'。

Summernote 代码块按钮

Summernote codeblock button

html

javascript

jquery

summernote