tutorial_44_example_1.html

<style type="text/css" media="screen">
    textarea {
        display: block;
        margin: auto;
        width: 600px;
        height: 5px;
    }
    #editor_div {
        display: block;
        margin: auto;
        width: 600px;
        height: 300px;
        border: 1px solid #888;
    }
    form {
        text-align: center;
    }
</style>

<div id="editor_div"><%= @escaped_text %></div>

<form action="/tutorial_44_demo_1" method="post">
<input type="submit" value="Submit" id='submit'>
<br>
<textarea name="editor"><%= @text %></textarea>
</form>

<hr>
<p>Raw text sent to the server:</p>
<pre>
<%= @escaped_text %>
</pre>

<script src="/javascripts/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var textarea = $('textarea[name="editor"]');
    textarea.hide();
    var editor = ace.edit("editor_div");
    editor.setTheme("ace/theme/github");
    editor.getSession().setMode("ace/mode/javascript");

    $('#submit').on('click', function() {
        textarea.val(editor.getSession().getValue());
    });
</script>