neocities/views/site_files/text_editor.erb

<style>
  #editor { 
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
  .theme-Code{
    float:right;
    position:relative;
    top:-50px;
  }
</style>

<div class="header-Outro">
  <div class="row content">
    <h1>Editing <%= @filename %></h1>
  </div>
</div>

<div class="content">
  <div class="row">
    <div class="col col-50">
      <p>
        Theme:
        <select id="theme" size="1" onchange="setTheme();" onkeyup="setTheme();">
          <optgroup label="Bright">
            <option value="ace/theme/chrome">Chrome</option>
            <option value="ace/theme/clouds">Clouds</option>
            <option value="ace/theme/crimson_editor">Crimson Editor</option>
            <option value="ace/theme/dawn">Dawn</option>
            <option value="ace/theme/dreamweaver">Dreamweaver</option>
            <option value="ace/theme/eclipse">Eclipse</option>
            <option value="ace/theme/github">GitHub</option>
            <option value="ace/theme/solarized_light">Solarized Light</option>
            <option value="ace/theme/textmate">TextMate</option>
            <option value="ace/theme/tomorrow">Tomorrow</option>
            <option value="ace/theme/xcode">XCode</option>
          </optgroup>
          <optgroup label="Dark">
            <option value="ace/theme/ambiance">Ambiance</option>
            <option value="ace/theme/chaos">Chaos</option>
            <option value="ace/theme/clouds_midnight">Clouds Midnight</option>
            <option value="ace/theme/cobalt">Cobalt</option>
            <option value="ace/theme/idle_fingers">idleFingers</option>
            <option value="ace/theme/kr_theme">krTheme</option>
            <option value="ace/theme/merbivore">Merbivore</option>
            <option value="ace/theme/merbivore_soft">Merbivore Soft</option>
            <option value="ace/theme/mono_industrial">Mono Industrial</option>
            <option value="ace/theme/monokai">Monokai</option>
            <option value="ace/theme/pastel_on_dark">Pastel on dark</option>
            <option value="ace/theme/solarized_dark" selected="selected">Solarized Dark</option>
            <option value="ace/theme/terminal">Terminal</option>
            <option value="ace/theme/tomorrow_night">Tomorrow Night</option>
            <option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
            <option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
            <option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
            <option value="ace/theme/twilight">Twilight</option>
            <option value="ace/theme/vibrant_ink">Vibrant Ink</option>
          </optgroup>
        </select>
      </p>
    </div>
  </div>

  <div class="row">
    <div class="col col-100">
      <div id="editor" style="width: 100%; position: relative; margin-bottom:25px"><%==encoding_fix(@file_data) %>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col col-33">
      <div class="txt-Center">
        <a class="btn-Action" href="/dashboard"><i class="fa fa-remove"></i>&nbsp;&nbsp;Exit Without Saving</a>
      </div>
    </div>

    <div class="col col-33">
      <div class="txt-Center">
        <a id="saveButton" class="btn-Action" href="#" onclick="saveTextFile(false); return false" style="opacity: 0.5"><i class="fa fa-save"></i>&nbsp;&nbsp;Save Changes</a>
      </div>
    </div>

    <div class="col col-33">
      <div class="txt-Center">
        <a id="saveAndExitButton" class="btn-Action" href="#" onclick="saveTextFile(true); return false" style="opacity: 0.5"><i class="fa fa-save"></i>&nbsp;&nbsp;Save and Exit</a>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col col-100 txt-Center">
      <div id="editorUpdates" class="alert alert-success hidden">
        <span></span>
      </div>
    </div>
  </div>
</div>

<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>

<script>
  var unsavedChanges = false

  function setTheme(name) {
    var editorTheme = $('#theme option:selected')
    editor.setTheme(editorTheme.val())
    $.post('/site/<%= current_site.username %>/set_editor_theme', {
      csrf_token: '<%= csrf_token %>',
      editor_theme: editorTheme.text()
    })
  }

  <% if current_site.editor_theme %>
    $('#theme option').filter(function() {
      return ($(this).text() == '<%= current_site.editor_theme %>')
    }).prop('selected', true)
  <% end %>

  function saveTextFile(quit) {
    if(unsavedChanges == false)
      return
    $.ajax({
      url: '/site_files/save/<%= @filename %>?csrf_token=<%= csrf_token %>',
      data: editor.getValue(),
      processData: false,
      contentType: false,
      type: 'POST',
      error: function(jqXHR, textStatus, errorThrown) {
        alert('There has been an error saving your file, please try again. If it continues to fail, make a copy of the file locally so you don\'t lose your changes!')
      },
      success: function(response){
        if(response == 'ok') {
          unsavedChanges = false
          if(quit === true) {
            window.location = '/dashboard'
          } else {
            $('#editorUpdates span').html('<i class="icon-save icon-2x"></i>&nbsp;&nbsp;<span style="font-size: 14pt">Your file has been saved.</span>')
            $('a#saveButton,a#saveAndExitButton').css('opacity', 0.5)
            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.getSession().setUseWrapMode(true)
    editor.setFontSize(14)
    editor.setShowPrintMargin(false)
    editor.setOptions({
      maxLines: Infinity
    })

    editor.on('change', function(obj) {
      $('a#saveButton,a#saveAndExitButton').css('opacity', 1)
      unsavedChanges = true
    })
  })

  $(window).keypress(function(event) {
    if(event.ctrlKey == true && event.key == 's') {
      saveTextFile(false)
      event.preventDefault()
      return false
    }
  })

  window.onbeforeunload = function() {
    if(unsavedChanges == true)
      return "You have unsaved changes!"
  }

  $('a#saveButton,a#saveAndExitButton').click(function() {
    if(!unsavedChanges)
      return false
    return true
  })

</script>