3

我在我的网站中使用了史诗编辑器，并且我正在使用服务器嵌入在页面上的降价来填充它。目前，当史诗编辑器显示时，它具有非常小的默认高度，并带有滚动条来处理查看整个内容。我可以手动设置 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 中设置一些东西使其不会以它的方式溢出，或者在它加载后确定高度的方法，我已经设置好了。谢谢你的帮助。

4

1 回答 1

4

我是制作 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选项。

于 2013-01-27T11:29:04.880 回答