首页 > 编程语言> > javascript-根据放置在其中的内容调整EpicEditor的大小

javascript-根据放置在其中的内容调整EpicEditor的大小

2019-10-31 10:38:10 作者：互联网

我在网站中使用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的包装器中,因此滚动条不会随着它的增长而出现.

演示：http://jsbin.com/eyidey/1/
演示代码：http://jsbin.com/eyidey/1/edit

更新

从EpicEditor 0.2.2开始,内置了自动增长功能.只需打开自动增长选项即可.

标签：coffeescript,css,html,javascript,epiceditor
来源： https://codeday.me/bug/20191031/1974972.html