Summernote change height value after initial setup

Question

I have summernote working on my website, as intended, with:

    $('#summernote').summernote({
        height: $(document).height() - ($("#Maintable").height() + $("#TblTop").height() + 60),
        minHeight: null,             // set minimum height of editor
        maxHeight: null,             // set maximum height of editor
        focus: true,

        toolbar: [
            // [groupName, [list of button]]
            ['style', ['fontname', 'bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['fontsize', ['fontsize', 'undo', 'redo']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['insert', ['picture', 'video', 'table']],
            ['search', ['findnreplace', 'changecolor']]
        ],
        buttons: {
            changecolor: ChangeColorButton
        }
    });

However, when I call the following code in a function that gets called on window.onresize, in order to change the height value, nothing happens. What should I do?

   $('#summernote').summernote({
                height: 100     
   });

Biz

Answer 1

From the documentation, it seems that summernote does not provide api to set the height after initialization.

However, by inspecting the html structure of the created editor, the height, minHeight and maxHeight options are applied to a div with class="note-editable". So we set the height of this div instead. Following code snippet show how to change the height of the editor after initialize.

$(document).ready(function() {
  var t = $('#summernote').summernote(
  {
  height: 100,
  focus: true
}
  );
  $("#btn").click(function(){
    $('div.note-editable').height(150);
  });
});

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<div id="summernote">Original height is 100. Click the button to change the height to 150</div>
<button id="btn">Change Height</button>

Vinegarette

Answer 2

It can be done with JS only, but its a nasty workaround:

let summernoteOptions = {
        height: 300
    }

$('#summernote').summernote(summernoteOptions);

$(document).on('click', '#change', function(){

summernoteOptions.height = 100;

  let content = $('#summernote').summernote('code');

  $('#summernote').summernote('destroy');
  $('#summernote').summernote(summernoteOptions);
  $('#summernote').summernote('code', content);

});

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<div id="summernote">Some text...</div>
<button id="change">Change Height Button</button>

Emendate

This worked really well. I added a button to toggle between scroll mode and full-screen and this was the perfect way to implement it. Thank you! – Nickolai