Embedding guide in form

[vanillajonathan]

The website has a embedding guide which use a div element along with CSS to cover the screen.

I think many would be interested in how to embed Ace within a form element and a submit button to POST the form.

Example:

<form method="post">
  <div class="mb-3">
    <label class="form-label">Code</label>
    <input type="hidden" id="code" name="code" />
    <div class="form-control" id="editor" style="height: 260px">{"hello": "world"}</div>
  </div>

  <input type="submit" value="Save" class="btn btn-success" />
</form>

<script>
  var editor = ace.edit("editor");
  editor.on("change", function () {
    document.getElementById("code").value = editor.getSession().getValue();
  });
  editor.getSession().setMode("ace/mode/json");
</script>