根据放入 EpicEditor 内容的大小调整编辑器大小

Question

根据放入 EpicEditor 内容的大小调整编辑器大小

3

我在我的网站上使用了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的源代码（它是由coffeescript编译而来）

$ ->
    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();

我希望在内容插入后通过reflow来扩展高度，但是没有成功。但如果我调整div的大小并调用reflow，则可以正确地调整大小。我已经检查了它创建的标记，希望能确定高度并调整其容器并告诉它重新流动。但是看起来它包含多个iframes，乍一看我不认为这会是一个快速的更改，或者是否可能。但是我欢迎任何解决方案。

我也知道，如果我将其容器大小调整到正确的高度，epiceditor将填充适当的空间。但我希望其高度为渲染所需的量，以便编辑器在其余网站设计中占用正确的空间。因此，如果有一种方法可以设置EpicEditor，使其不会以这种方式溢出，或者一种确定加载后高度的方法，那就好了。感谢任何帮助。

- Mike McFarland

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oscar Godson · Accepted Answer

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