css:
  #editor { 
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }

.row
  .span6
    font style="font-size: 27pt" Editing #{params[:filename]}
  .span6
    span.pull-right
      | Theme: 
      select id="theme" size="1" onchange="setTheme();" onkeyup="setTheme();"
        optgroup label="Bright"
          option value="ace/theme/chrome" Chrome
          option value="ace/theme/clouds" Clouds
          option value="ace/theme/crimson_editor" Crimson Editor
          option value="ace/theme/dawn" Dawn
          option value="ace/theme/dreamweaver" Dreamweaver
          option value="ace/theme/eclipse" Eclipse
          option value="ace/theme/github" GitHub
          option value="ace/theme/solarized_light" Solarized Light
          option value="ace/theme/textmate" TextMate
          option value="ace/theme/tomorrow" Tomorrow
          option value="ace/theme/xcode" XCode
        optgroup label="Dark"
          option value="ace/theme/ambiance" Ambiance
          option value="ace/theme/chaos" Chaos
          option value="ace/theme/clouds_midnight" Clouds Midnight
          option value="ace/theme/cobalt" Cobalt
          option value="ace/theme/idle_fingers" idleFingers
          option value="ace/theme/kr_theme" krTheme
          option value="ace/theme/merbivore" Merbivore
          option value="ace/theme/merbivore_soft" Merbivore Soft
          option value="ace/theme/mono_industrial" Mono Industrial
          option value="ace/theme/monokai" Monokai
          option value="ace/theme/pastel_on_dark" Pastel on dark
          option value="ace/theme/solarized_dark" selected="selected" Solarized Dark
          option value="ace/theme/terminal" Terminal
          option value="ace/theme/tomorrow_night" Tomorrow Night
          option value="ace/theme/tomorrow_night_blue" Tomorrow Night Blue
          option value="ace/theme/tomorrow_night_bright" Tomorrow Night Bright
          option value="ace/theme/tomorrow_night_eighties" Tomorrow Night 80s
          option value="ace/theme/twilight" Twilight
          option value="ace/theme/vibrant_ink" Vibrant Ink

.row
  .span12
    div id="editor" style="width: 100%; height: 600px; position: relative;"
      #{@file_data}
    
.row.text-center style="margin-top: 10px"
  .span4
    a.btn.btn-large.btn-warning href="/dashboard" <i class="icon-remove"></i>&nbsp;&nbsp;Finish Without Saving
  .span4
    a.btn.btn-large.btn-success href="#" onclick="saveTextFile(false); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save Changes
  .span4
    a.btn.btn-large.btn-info href="#" onclick="saveTextFile(true); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save and Finish
    
.row style="margin-top: 20px"
  .span6.offset3.text-center
    div id="editorUpdates" class="alert alert-success hidden"
      span
    
script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"
javascript:

  function setTheme(name) {
    editor.setTheme($('#theme').val());
  }
  
  function saveTextFile(quit) {
    /*
    $.post('/site_files/save/#{params[:filename]}', editor.getValue(), function(resp) {
      if(resp == 'ok') {
        $('#editorUpdates span').text('Your file has been saved.');
        $('#editorUpdates').removeClass('hidden');
      }
    });
    */
    
    $.ajax({
      url: '/site_files/save/#{params[:filename]}',
      data: editor.getValue(),
      processData: false,
      contentType: false,
      type: 'POST',
      success: function(response){
        if(response == 'ok') {
          if(quit === true) {
            window.location = '/dashboard';
          }
          $('#editorUpdates span').html('<i class="icon-save icon-2x"></i>&nbsp;&nbsp;<font style="font-size: 14pt">Your file has been saved.</font>');
          setTimeout(function() {
            $('#editorUpdates').fadeOut();  //.addClass('hidden');
          }, 2000);
          
        } else {
          $('#editorUpdates span').text(response);
        }
        $('#editorUpdates').fadeIn();
        $('#editorUpdates').removeClass('hidden');
        
      }
    });
  }

  var editor = {};

  $(document).ready(function() {
    editor = ace.edit("editor");
    setTheme();
    editor.getSession().setMode("ace/mode/html");
    editor.getSession().setTabSize(2);
    editor.setFontSize(14);
    editor.setShowPrintMargin(false);
  });