Summernote初始化设置后如何更改高度值

Question

我在我的网站上使用了Summernote，如预期地运作良好，包括:

    $('#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
        }
    });

然而，当我在一个被调用于window.onresize的函数中调用以下代码以改变高度值时，什么也没发生。我该怎么办？

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

- RafaP

Answer 1

从文档中可以看出，Summernote似乎没有提供API来设置初始化后的高度。

然而，通过检查创建的编辑器的HTML结构，height、minHeight和maxHeight选项被应用于一个带有class="note-editable"的

。因此，我们需要设置这个

的高度。以下代码片段显示了如何在初始化后更改编辑器的高度。

$(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>

- samabcde

Answer 2

这可以只使用JS完成，但这是一种不好的解决方案:

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>

- Karol Pawlak

---

这个效果非常好。我添加了一个按钮来切换滚动模式和全屏模式，这是实现它的完美方式。谢谢！ - Pam Nelligan