Javascript 根据放置在编辑器中的内容调整编辑器大小_Javascript_Html_Css_Coffeescript_Epiceditor

Javascript 根据放置在编辑器中的内容调整编辑器大小

javascript html css coffeescript

Javascript 根据放置在编辑器中的内容调整编辑器大小,javascript,html,css,coffeescript,epiceditor,Javascript,Html,Css,Coffeescript,Epiceditor,我在我的站点中使用epiceditor，并使用服务器嵌入在页面上的标记填充它。当前，当epiceditor显示时，它的默认高度非常小，使用滚动条可以查看整个内容。我可以手动设置div的高度，现在这是我能做的最好的了（我已经将它设置为相当大的值：800px）。不过，我希望它的高度始终足以容纳整个内容，而无需滚动条。本质上类似于溢出：可见以下是到目前为止的相关部分 <html> <head> <script src="/assets/javas

我在我的站点中使用epiceditor，并使用服务器嵌入在页面上的标记填充它。当前，当epiceditor显示时，它的默认高度非常小，使用滚动条可以查看整个内容。我可以手动设置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>

我希望回流可以在插入内容后扩大高度，但是没有这样的运气。但是，如果我调整div的大小并调用reflow，它会正确调整大小。我检查了它创建的标记，希望能够确定高度，调整容器大小，并告诉它回流。然而，它似乎包含多个iframe，乍一看，我没想到这会是一个快速的改变，或者甚至是可能的。不过，我欢迎任何解决方案

我也明白，如果我将容器的大小调整到正确的高度，epiceditor将填充适当的空间。但是，我希望它的高度是渲染所需的量，以便编辑器在站点设计的其余部分占据适当的空间。因此，如果我可以在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的包装中添加了一个

溢出：隐藏，这样滚动条就不会随着它的增长而出现
演示：

演示代码：
更新
从EpicEditor 0.2.2开始，内置自动增长功能。只需打开“自动增长”选项。这正是我所害怕的。谢谢你的回复，我很快就会给出这样的解决方案。这个功能作为一个特性对我来说是有用的。网站上滚动条中的滚动条在不需要的时候会让我发疯，这是我所拥有的，除非它能动态调整大小。顺便说一句，你的编辑太棒了，谢谢你的工作和快速的回复。@MikeMcFarland-查看我的最新更新。让它在没有隐藏元素的情况下工作，并且只需要几行代码！比我快。太棒了，谢谢，这很简单，对我很有用：）
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();
});