我在网站中使用Epiceditor,并使用服务器嵌入页面的markdown填充它。当前,当Epiceditor显示时,它的默认高度很小,并带有滚动条以处理查看整个内容的过程。我可以手动设置div的高度,现在这是我所能做到的最好的(我将其设置为相当大的值:800px)。但是,我希望它的高度始终足以容纳所有内容而无需滚动条。本质上类似overflow:visible。
这是到目前为止的相关部分
<html>
<head>
<script src="/assets/javascripts/epiceditor/js/epiceditor.min.js" type="text/javascript"></script>
<script id="postMarkdown" type="text/markdown" data-postId="1">
#Markdowns in here
...
</script>
<style>
#epiceditor{
height: 800px;
}
</style>
<script src="/assets/javascripts/thrown/posts/edit.js" type="text/javascript"></script>
</head>
<body>
<div id="epiceditor">
</div>
</body>
</html>
这是edit.js源代码(从coffescript编译而来)
$ ->
postMarkdown = $("#postMarkdown").first()
options =
basePath : '../../assets/javascripts/epiceditor'
editor = new EpicEditor(options).load()
postId = postMarkdown.data('postId')
markdown = postMarkdown.html()
editor.importFile('posts/'+postId,markdown);
editor.reflow();
我希望在内容插入后重排可以扩大高度,但是没有这种运气。但是,如果我调整div的大小并调用重排,它将正确调整大小。
我已经检查了它创建的标记,希望可以确定高度并调整其容器的大小并告诉其进行回流。但是,它似乎包含多个iframe,乍一看,我没想到这会是一个快速的更改,甚至没有可能。但是,我欢迎任何解决方案。
我也了解,如果我将容器的大小调整到合适的高度,主持人将填补适当的空间。但是,我希望它的高度是渲染所需的数量,以使编辑器在其余站点设计中占据适当的空间。因此,如果我可以在EpicEditor中进行设置,以使其不按原样溢出,或者确定装入后的高度,则可以进行设置。
谢谢你的帮助。
最佳答案
我是制作EpicEditor的人,这是为您提供的解决方案:
var editor = new EpicEditor({
basePath: 'https://raw.github.com/OscarGodson/EpicEditor/develop/epiceditor'
});
var updateEditorHeight = function () {
editorHeight = $(editor.getElement('editor').body).height();
// +20 for padding
$('#epiceditor').height(editorHeight + 20);
editor.reflow();
}
editor.load(function (){
updateEditorHeight();
});
editor.on('update', function () {
// You should probably put a check here so it doesn't
// run for every update, but just on update, AND if the
// element's height is different then before.
updateEditorHeight();
});
另外,在CSS中,我在Epiceditor的包装器中添加了
overflow: hidden
,因此滚动条不会随着它的增长而出现。演示:http://jsbin.com/eyidey/1/
演示代码:http://jsbin.com/eyidey/1/edit
更新
从EpicEditor 0.2.2开始,内置了自动增长功能。只需打开
autogrow
选项。