根据放入的内容调整 EpicEditor 的大小
Posted
技术标签:
【中文标题】根据放入的内容调整 EpicEditor 的大小【英文标题】：Resize EpicEditor based on the content put within it 【发布时间】：2013-01-10 15:41:29 【问题描述】：我在我的网站中使用了史诗编辑器，并且我正在使用服务器嵌入在页面上的 markdown 来填充它。目前，当史诗编辑器显示时，它具有非常小的默认高度，并带有滚动条来处理查看整个内容。我可以手动设置 div 的高度，目前这是我能做的最好的（我已经将它设置为相当大的值：800px）。但是，我希望它的高度始终足以容纳整个内容而无需滚动条。本质上类似于溢出：可见。
这是到目前为止的相关部分
<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 的大小并调用 reflow，它确实会正确调整大小。 我检查了它创建的标记，希望我可以确定高度并调整其容器的大小并告诉它重排。但是，它似乎包含多个 iframe，乍一看，我没想到这是一个快速的更改，或者甚至可能。不过，我欢迎任何解决方案。
我也明白，如果我将其容器的大小调整到正确的高度，epiceditor 将填充正确的空间。但是，我希望它的高度是渲染所需的量，以便编辑器在站点设计的其余部分中占据正确的空间。因此，如果我可以在 EpicEditor 中设置一些东西以使其不会以它的方式溢出，或者在它加载后确定高度的方法，我已经设置好了。 感谢您的帮助。
【问题讨论】：
【参考方案1】：我是制作 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 中，我将 overflow: hidden 添加到了史诗编辑器的包装器中，这样滚动条就不会随着它的增长而出现。
演示：http://jsbin.com/eyidey/1/ 演示代码：http://jsbin.com/eyidey/1/edit
更新
从 EpicEditor 0.2.2 开始，自动增长是内置的。只需打开 autogrow 选项。
【讨论】：
这就是我害怕的。感谢您的回复，我很快就会给出这样的解决方案。这个功能作为一个特性对我很有用。网站上滚动条内的滚动条在不需要时让我发疯，除非它动态调整自身大小，否则这是不正常的。顺便说一句，您的编辑很棒，感谢您的工作和快速响应。 @MikeMcFarland - 查看我的最新更新。只需几行，就可以在没有隐藏元素的情况下使用它！ 打败我。太棒了，谢谢，这很简单，对我有用:)以上是关于根据放入的内容调整 EpicEditor 的大小的主要内容，如果未能解决你的问题，请参考以下文章