Сделать высоту родительского div редактора froala масштабируемой

Я использую встроенный редактор froala 2.4.0 для реализации функции, похожей на публикацию в Facebook. Я встроил редактор froala в div, как показано на изображении ниже. Теперь я хотел бы сделать родительский div масштабируемым, т. е. увеличивать/уменьшать по мере изменения содержимого редактора froala. Поле с рамкой — это родительский div, а строка-заполнитель — это Встроенный редактор froala. Есть ли способ сделать это?введите здесь описание изображения

Это то, что я получил до сих пор:

$(function() {
  $('#custom-post-feed-text').froalaEditor({
    toolbarInline: true,
    charCounterCount: false,
    placeholderText: 'Share what\'s on your mind...',
    toolbarButtons: [],
    quickInsertButtons: []
  })
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.4.0/css/froala_editor.pkgd.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.4.0/js/froala_editor.pkgd.min.js"></script>

<div class="custom-post-feed-container" id="custom-post-feed-container-personal">
  <div class="custom-post-feed-textarea">
    <textarea id="custom-post-feed-text"></textarea>
  </div>
  <div class="custom-post-feed-options">
    <span class="custom-post-feed-more-options" id="custom-feed-more-options" title="More">+</span>
    <span id="more-option">
      <span title="Upload image"><i class="fa fa-camera" aria-hidden="true"></i></span>
      <span title="Embed link"><i class="fa fa-link" aria-hidden="true"></i></span>
      <span title="Upload video"><i class="fa fa-video-camera" aria-hidden="true"></i></span>
      <span title="Add Poll"><i class="fa fa-pie-chart" aria-hidden="true"></i></span>
    </span>
  </div>
</div>


jquery css froala
person Shreyas Nargund    schedule 23.01.2017    source источник
comment
Также я хотел бы знать, есть ли какое-либо событие фокуса, которое я могу использовать. Мне нужно выполнить некоторый код, как только пользователь сфокусирует редактор. Обычная функция jquery .focus() в этом случае не работает.   -  person Shreyas Nargund    schedule 23.01.2017
comment
Вы пробовали autosize.js?   -  person Gacci    schedule 23.01.2017
comment
Div должен расширяться, если вы где-то не установили высоту. Можем ли мы увидеть больше вашего кода или полный живой пример?   -  person Serg Chernata    schedule 23.01.2017

Ответы (1)


arrow_upward
1
arrow_downward

Редактор Froala поддерживает функцию автоматического увеличения, где вы можете установить heightMin и mandheightMax`, и он будет автоматически увеличиваться в высоту по мере ввода пользователем. См. документы

https://www.froala.com/wysiwyg-editor/examples/adjustable-height

$(function() {
  $('#custom-post-feed-text').froalaEditor({
    toolbarInline: true,
    charCounterCount: false,
    placeholderText: 'Share what\'s on your mind...',
    toolbarButtons: [],
    quickInsertButtons: []
    heightMin: 50,
    heightMax: 200
  })
});

Для вашей цели, если родительский div не имеет фиксированной высоты для custom-post-feed-textarea, он будет автоматически увеличиваться

person Nadeem Manzoor    schedule 23.01.2017