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

<div class="container">
  [% IF deferred.status %]
    [%
       outcome_map = {
           ok => {
               color => 'success',
               message => 'Les modifications ont été prises en compte.'
           },
           ok_with_warnings => {
               color => 'warning',
               message => 'Les modifications ont été prises en compte, mais avec les réserves suivantes :'
           },
           failure => {
               color => 'danger',
               message => 'La zone contient des erreurs ; les modifications n’ont pas été prises en compte.'
           }
       }

       outcome_info = outcome_map.item(deferred.status.outcome)
    %]
    <div class="alert alert-[% outcome_info.color %] pb-1">
      <p>[% outcome_info.message %]</p>
      [% IF deferred.status.messages.size > 1 %]
        <ul>
          [% FOR m IN deferred.status.messages %]
          <li>[% m | html %]</li>
          [% END %]
        </ul>
      [% ELSIF deferred.status.messages.size == 1 %]
        <p>[% deferred.status.messages.first | html %]</p>
      [% END %]
    </div>
  [% END %]
  <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>