EpicEditor reflowing

epiceditor-reflowing.js

// Here's an example of using EpicEditor with something like Twitter Bootstrap tabs.
// Thing is that EpicEditor doesn't calculate its dimensions properly when it is nested in a hidden container.
// So, we just need to call 'reflow' method of the EpicEditor. Here is the simple solution:

// Tab link that's clicked
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  
  // EpicEditor instance recalculates its dimensions.
  editor.reflow();
});

// Also remember to set different options to different EpicEditor instances.
// For example, if you want to provide a separate EpicEditor for each language
// that your system supports, you need to have some parameters to be different.
// Like so:

jQuery(function(){
  var editors = {};

  $('.js-locale-tab').each(function(idx){
    var locale = $(this).data('locale');
    var options = {
      container: 'js-epiceditor-' + locale,
      textarea: 'js-textarea-markdown-' + locale,
      basePath: '/js/epiceditor',
      localStorageName: 'epiceditor-' + locale,
      file: {
        name: 'epiceditor-' + locale
      },
      autogrow: true
    };

    editors[locale] = new EpicEditor(options).load();
  });  
});