Resize EpicEditor based on the content put within it

Question

I'm using epiceditor within my site, and I am populating it with markdown embedded on the page by the server. Currently when epiceditor displays, it has a very small default height, with scroll bars to handle viewing the entire content. I can manually set the height of the div, and for now that's the best I've been able to do (I've set it to something reasonably large: 800px). However I would like its height to always be enough to fit the entire content without scroll-bars. Essentially something like overflow:visible.

Here's the relevant portions so far

<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>

And heres the edit.js source (its compiled from 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();

I was hoping reflow might expand the height after the content was inserted, however no such luck. However If I resize the div and call reflow, It does resize properly. I've inspected the markup it creates in hopes I could determine the height and resize its container and tell it to reflow. However it seems it contains multiple iframes, and at a glance I didn't expect that to be a quick change, or if it would even be possible. However I'd welcome any solution.

I also understand that if I size its container to the right height, epiceditor will fill the proper space. However I want its height to be the amount needed to render, such that the editor takes up the right space in the rest of the sites design. Therefore if there something I can set in EpicEditor to have it not overflow in the manner it is, or a way to determine the height after it loads, I'm set. Thanks for any help.

Oscar Godson · Accepted Answer · 2013-08-14T21:07:51.267

4

I'm the guy who made EpicEditor, here's a solution for you:

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

Also, in the CSS I added a overflow: hidden to epiceditor's wrapper so the scrollbars don't appear as it grows.

DEMO: http://jsbin.com/eyidey/1/
DEMO CODE: http://jsbin.com/eyidey/1/edit

UPDATE

As of EpicEditor 0.2.2 autogrow is built in. Just turn on the autogrow option.

edited Aug 14 '13 at 21:07

answered Jan 27 '13 at 11:29

Oscar Godson

28,084
40
103
191

This is what I was afraid of. Thank you for your reply, ill give a solution like that a shot soon. This functionality as a feature would be useful to me. Scrollbars within scrollbars on sites drive me nuts when they're not needed, which is what ill have unless it sizes itself dynamically. Your editor is awesome by the way, thank you for the work and the quick response. – Mike McFarland Jan 27 '13 at 23:07
@MikeMcFarland - See my latest update. Got it working without the hidden element and in just a few lines! – Oscar Godson Jan 28 '13 at 16:35
Beat me to it. Awesome thanks, that's straightforward and works for me :) – Mike McFarland Jan 28 '13 at 20:40

Resize EpicEditor based on the content put within it

1 Answers1

UPDATE