Summernote изменить значение высоты после начальной настройки - PullRequest
Новая
       7

Summernote изменить значение высоты после начальной настройки

0 голосов
/ 06 ноября 2018

У меня есть 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     
   });

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Это может быть сделано только с 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>
0 голосов
/ 06 ноября 2018

Из документации кажется, что summernote не предоставляет API для установки высоты после инициализации.

Однако, проверяя структуру html созданного редактора, опции height, minHeight и maxHeight применяются к div с class="note-editable". Поэтому мы устанавливаем высоту этого div вместо этого. В следующем фрагменте кода показано, как изменить высоту редактора после инициализации. 

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

<!-- include summernote css/js -->
<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">Original height is 100. Click the button to change the height to 150</div>
<button id="btn">Change Height</button>
...