我正在使用froala 2.4.0内联编辑器来实现类似Facebook帖子的功能。我在div中编写了froala编辑器,如下图所示。现在我想使父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>
答案 0 :(得分:1)
Froala编辑器支持自动增长功能,您可以在其中设置heightMin
和m 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
的任何固定高度,它将自动增长