Resize EpicEditor based on content placed in it

I am using epiceditor on my site and I am filling it with markdown embedded in the page by the server. Currently, when the epiceditor is displayed, it has a very small default height, with scrollbars to handle all the content. I can manually set the height of the div and so far the best I could do (I set it to something big enough: 800px). However, I would like its height to always be high enough to fit all content without scrollbars. Essentially a bit of an overflow: apparently.

Here's the relevant parts 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 source edit.js (compiled it 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 that the reflow could increase the height after the content was inserted, however there was no such luck. However, if I resize the div and call reflow it resizes correctly. I checked the markup I created in the hopes that I could figure out the height and resize its container and tell it to be rescheduled. However, it appears to contain multiple frames, and at first glance, I didn't expect this to be a quick change, or if possible. However, I would welcome any solution.

I also understand that if I put its container at the right height the epiceditor will fill the right space. However, I want it to be as tall as possible for rendering, so that the editor takes the right place in the rest of the site design. So if there is anything I can set in EpicEditor so that it doesn't overflow the way it is, or a way to determine the height after loading, I'm tuned in. Thanks for any help.

+3


source to share


1 answer


I am the guy who made EpicEditor, here is the 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 height is different then before.
  updateEditorHeight();
});

      

Also, in CSS I added a wrapper overflow: hidden

to the epiceditor so the scrollbars don't appear as they grow.



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

UPDATE

As in EpicEditor 0.2.2, autorun is built in. Just enable the option autogrow

.

+4


source







All Articles