2017-01-23 11 views
0

Я использую встроенный редактор froala 2.4.0 для реализации функции facebook post-like. Я выбрал редактор froala в div, как показано на рисунке ниже. Теперь я хотел бы сделать родительский div масштабируемым, т. Е. Увеличивать/уменьшаться по мере изменения содержимого редактора froala. Граничным полем является родительский div, а строка-заполнитель - встроенный редактор froala. Есть ли способ сделать это? enter image description hereСделать высоту родительского 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>

+0

Кроме того, я хотел бы знать, если есть какое-либо событие фокус, что Я могу использовать. Мне нужно выполнить некоторый код, как только пользователь сконцентрирует редактор. Нормальная функция .focus() jquery в этом случае не работает. –

+0

вы пробовали autosize.js? – Gacci

+0

div должен расширяться, если вы не установили высоту где-нибудь. Можем ли мы увидеть больше вашего кода или полный живой пример? –

ответ

1

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

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 он будет автоматически расти

+0

Thanx для помощи !!!! –

 Смежные вопросы

  • Нет связанных вопросов^_^