How can I get the content inside Ace (code editor) after clicking a button? - express

Question

I have a page with an embedded Ace code editor that will contain Java code. I want to get its contents via a POST request after a button is pressed.
I'm aware that one can do this in order to get the value:
var code = editor.getValue();
However, I'm not too sure how I would get this value from my route handler. Ideally, I'd like to have the editor script inside a separate .js file, but I can't seem to get it to be recognized by anything.
In my handlebars template for /myroute/*
<div class = "bigclass">
some divs
<div id = "containerclass">
<div id = "editor"></div>
<script src = "https://pagecdn.io/lib/ace/1.4.8/ace.js", type = "text/javascript" charset = "utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/github");
editor.session.setMode("ace/mode/java");
editor.session.setUseWrapMode(true);
editor.setValue("Hello");
editor.clearSelection();
</script>
</div>
some more divs
<div id = "someotherclass">
<form method = "POST" action = "">
<button style = "text-align: center" type="submit" class="btn"> Submit</button>
</form>
</div>
</div>
Route Handler for /myroute/*
app.post('/myroute/*', function(req, res) {
// Get the contents of the editor
});

Answer 1

You've to set an input inside your form, and fill it every time a change is done on the editor.
On clicking submit, you can have the value from the req.body
<div class = "bigclass">
some divs
<div id = "containerclass">
<div id = "editor"></div>
<script src = "https://pagecdn.io/lib/ace/1.4.8/ace.js", type = "text/javascript" charset = "utf-8"></script>
</div>
some more divs
<div id = "someotherclass">
<form method = "POST" action = "">
<textarea name="content" id="content"></textarea>
<button style = "text-align: center" type="submit" class="btn"> Submit</button>
</form>
</div>
</div>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/github");
editor.session.setMode("ace/mode/java");
editor.session.setUseWrapMode(true);
editor.getSession().on("change", function () {
document.getElementById('content').val(editor.getSession().getValue());
});
editor.setValue("Hello");
editor.clearSelection();
</script>
Server:
app.post('/myroute/*', function(req, res) {
const content = req.body.content;
});