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

Answer 1

在documentation中，似乎 summernote 没有提供用于初始化后设置高度的api。

但是，通过检查创建的编辑器的html结构，将height，minHeight和maxHeight选项应用于具有div的{{1}}。因此，我们改为设置此class="note-editable"的高度。以下代码段显示了初始化后如何更改编辑器的高度。

div

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

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>

初始设置后，Summernote更改高度值

2 个答案: