ace editor (in webface)

1 files changed, 31 insertions, 2 deletions

diff --git a/webface/templates/model_edit.html b/webface/templates/model_edit.html
index 38aef60..4ca5d36 100644
--- a/webface/templates/model_edit.html
+++ b/webface/templates/model_edit.html
@@ -1,3 +1,30 @@
+{{# partial head}}
+<script src="/static/ace-1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var modelica_editor = ace.edit('modelica_editor');
+    var modelica_textarea = document.getElementById("modelica_textarea");
+    modelica_editor.setTheme("ace/theme/twilight");
+    modelica_editor.setShowPrintMargin(false);
+    modelica_editor.session.setValue(modelica_textarea.value);
+    modelica_editor.session.on("change", function () {
+        modelica_textarea.value = modelica_editor.getValue();
+    });
+
+    var markdown_editor = ace.edit('markdown_editor');
+    var markdown_textarea = document.getElementById("markdown_textarea");
+    markdown_editor.setTheme("ace/theme/twilight");
+    markdown_editor.setShowPrintMargin(false);
+    markdown_editor.session.setMode("ace/mode/markdown");
+    markdown_editor.setValue(markdown_textarea.value);
+    markdown_editor.session.on("change", function () {
+        markdown_textarea.value = markdown_editor.getValue();
+    });
+  });
+</script>
+{{/partial}}
+
 {{# partial content}}
 <h1 style="margin-bottom: 0.1em;">
     <a href="/m/{{namespace}}/" style="color: black; text-decoration: none;">
@@ -13,10 +40,12 @@ The computable model must conform to a subset of the Modelica language.
 just a 500 error.
 
 <br><br>
-<textarea name="modelica" style="width:50em; height:19em;">{{ modelica }}</textarea>
+<div id="modelica_editor" style="width:100%; height:24em;"></div>
+<textarea name="modelica" id="modelica_textarea" style="display: none;">{{ modelica }}</textarea>
 
 <h3>Markdown</h3>
-<textarea name="markdown" style="width:50em; height:19em;">{{ markdown }}</textarea>
+<div id="markdown_editor" style="width:100%; height:24em;"></div>
+<textarea name="markdown" id="markdown_textarea" style="display: none;">{{ markdown }}</textarea>
 
 <br><br>
 <input type="submit" value="Submit!"></input>