add ace as editor

siuying · Apr 18, 2012 · 3063789 · 3063789
1 parent 8818c87
commit 3063789
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -1,11 +1,14 @@
 #editor {
-  font-size: 1.2em;
-  font-family: "Monaco";
-  position: relative;
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  width: 500px;
+  height: 400px;
+}
+
+.right {
+  position: absolute;
+  left: 500px;
 }
 
 #output {
-  font-size: 1.4em;
+font-size: 1.4em;
 }
diff --git a/views/index.erb b/views/index.erb
@@ -18,15 +18,15 @@
     <div class="row-fluid">
       <div class="span12">
         <div class="row-fluid">
-          <div class="span6">
-            <textarea id="editor" class="input-xlarge" rows="40">def binary_search(key, array)
+          <div class="left">
+            <div id="editor">def binary_search(key, array)
    low = 0
    high = array.length - 1
 end
 
-binary_search('a', ['a', 'b', 'c', 'd', 'e', 'f'])</textarea>
+binary_search('a', ['a', 'b', 'c', 'd', 'e', 'f'])</div>
           </div>
-          <div class="span6">
+          <div class="right">
             <pre id="output">
             </pre>
           </div>
@@ -37,10 +37,21 @@ binary_search('a', ['a', 'b', 'c', 'd', 'e', 'f'])</textarea>
     <script src="/js/jquery.min.js"></script>
     <script src="/js/bootstrap.min.js"></script>
     <script src="/js/coffee-script.js"></script>
+
+    <script src="/js/ace.js" type="text/javascript" charset="utf-8"></script>
+    <script src="/js/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
+    <script src="/js/mode-ruby.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/coffeescript">
 $ ->
+  editor = ace.edit("editor")
+  Ruby = require("ace/mode/ruby").Mode
+  editor.getSession().setMode(new Ruby())
+  editor.setTheme("ace/theme/twilight")
+  editor.getSession().setTabSize(2)
+  editor.getSession().setUseSoftTabs(true)
+
   compile = ->
-    val = $("#editor").val()
+    val = editor.getSession().getValue()
     $.ajax
       type: 'POST'
       url: '/compile'
@@ -67,10 +78,9 @@ $ ->
       dataType: 'json'
 
   compile()
-
-  $("#editor").keyup (e) ->
-    compile()
+  editor.getSession().on 'change', compile
 
 </script>
+
   </body>
 </html>