spf-dkim-dmarc-demo/console/web-api/views/dns/zone-edit.tt

<div class="container">
  <div class="row mt-3 mb-4">
    <main class="col">
      <form id="edit-form" method="POST">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span>
              Zone DNS : <span class="font-monospace">[% zone_to_edit | html %]</span>
            </span>
            <button type="submit" class="btn btn-primary" onClick="post_zone_file()">Enregistrer et appliquer</button>
          </div>
          <div class="card-body p-0">
            <div id="editor" name="editor" style="height: 25em; font-size: 1rem;">
              [%~ zone_contents ~%]
            </div>
          </div>
        </div>
        <input type="hidden" id="zone-contents" name="zone-contents" value="" />
      </form>
    </main>
  </div>
</div>

<script type="text/javascript" src="[% request.uri_base %]/ace-build/src/ace.js"></script>
<script>
 var editor = ace.edit(
     "editor", {
         theme: "ace/theme/chrome",
         mode: "ace/mode/bind_zone_files",
         minLines: 8,
         maxLines: 30,
         autoScrollEditorIntoView: true,
         displayIndentGuides: false,
     });
 editor.resize();


 function post_zone_file() {
     $("#zone-contents").attr("value", editor.getValue());
     $("#edit-form").submit();
 }
</script>