jsoneditor_8html_source.html

<!DOCTYPE HTML>

<html>

<head>

  <title>JSONEditor</title>


  <link rel="stylesheet"

    href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.28.2/jsoneditor.min.css"

    integrity="sha256-0g5yJEEhhjj7b+OT+tOn8IBly2P/5+UyU1g1/W5VZfI="

    crossorigin="anonymous" />


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.28.2/jsoneditor.min.js"

      integrity="sha256-0fFVLa/33uSRXl/lUXolxF9IdLB/WC3DRP1JGXmTJyM="

      crossorigin="anonymous"></script>


  <style type="text/css">

    #jsoneditor {

      width: 600px;

      height: 900px;

    }

  </style>

</head>

<body>

  <p>

    Modify json and click submit.

  </p>

  <p>

    <form action="" method="post">

      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

      <button id="submit" name="submit" value="{{ TheJson }}">Submit result</button>

    </form>

  </p>

<div id="jsoneditor"></div>


<script>

  // create the editor

  var container = document.getElementById('jsoneditor');

  var options = {};

  var editor = new JSONEditor(container, options);


  // set json

  var InJson = {{ TheJson|safe }};

  editor.set(InJson);


  // End editor button

  document.getElementById('submit').onclick = function () {

    var OutJson = editor.get();

    document.getElementById('submit').value=JSON.stringify(OutJson); //, null, 2

  };


  stra=JSON.stringify(editor.get());

  prefix="tiledviz_editor";

  var sessionDate = new Date();

  var strDate=sessionDate.toLocaleDateString({day: "2-digit", month: "2-digit"}).replace(/\//g, "-") + "_" + sessionDate.toLocaleTimeString("fr-FR").replace(/:/g, "-");

  var fileName = prefix + "_" + strDate + ".json";

  //var file = new File([stra], fileName, {type: "text/plain;charset=utf-8"},{ autoBom: false });

  //saveAs(file);


  var a = document.createElement("a");

  var file = new Blob([stra], {type: "text/plain;charset=utf-8"});

  a.href = URL.createObjectURL(file);

  a.download = fileName;

  var button = document.createElement('button');

  button.setAttribute('class',"btn btn-primary btn-lg");

  button.innerText="Save";

  button.onclick=function(){ a.click(); URL.revokeObjectURL(a.href) };

  a.appendChild(button);

  document.body.appendChild(a);


</script>

</body>

</html>