javascript - Summernote change height value after initial setup - Stack Overflow

admin管理员组

文章数量:1301562

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     
   });

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     
   });

• javascript
• summernote

Share Improve this question Follow asked Nov 6, 2018 at 11:34 RafaPRafaP 15311 gold badge22 silver badges88 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 19

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>

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>

本文标签： javascriptSummernote change height value after initial setupStack Overflow