index.html 3.53 KB
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>NgOne</title>
  <!-- <base href="/"> -->
  <!--  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>

  <style>
    #saveDataTextarea {
      margin: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 180px;
      height: 100%;
    }
    .upload-container {
      width: 100px;
      height: 40px;
      position: absolute;
      right: 40px;
      border-radius: 2px;
      border: 1px solid #dcdfe6;
      line-height: 100px;
      margin: 10px;
      text-align: center;
      display:flex;
      align-items:center; 
      justify-content:center;
    }
    .hide-fileinput {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }
  </style>
 
  
</head>

<body onload="loadData();" style="background-color: white;">
  <pre id="saveDataTextarea"></pre>
  <div class="upload-container">
    <div class="upload-file">上传文件</div>
    <input class="hide-fileinput" type="file" name="file" onchange="uploadFile()">
  </div>
</body>

<script>

  var editor = ace.edit("saveDataTextarea");
  editor.setTheme("ace/theme/chrome");
  editor.session.setMode("ace/mode/json");
  editor.session.on('change', function(delta) {
    try {
      const data = JSON.parse(editor.getValue());
      window.courseware.setData(data, null, "cocos_001");
    } catch (error) {}
  });
    
  let saveDataStr = '';
  function loadData() {
    window.courseware.getData((data) => {
      try {
        editor.setValue(JSON.stringify(data, null, 2)); 
        editor.gotoLine(editor.session.getLength());
      } catch (error) {}
    }, "cocos_001");
  }

  function uploadFile(){
    const dom = document.querySelector(".hide-fileinput");
    const file = dom.files[0];
    dom.setAttribute("disabled", true);
    document.querySelector(".upload-file").innerHTML = "上传中...";
    commonUploadFile(file, (data) => {
      try {
        const d = JSON.parse(data);
        const protocolStr = document.location.protocol;
        const url = d.url
          .replace(/http:/g, protocolStr)
          .replace(/https:/g, protocolStr);
        editor.insert(url);
      } catch (error) {}
      dom.removeAttribute("disabled");
      document.querySelector(".upload-file").innerHTML = "上传文件";
    });
  }

  function commonUploadFile(file, callback) {
    const uploadUrl = window.courseware.uploadUrl();  //上传文件的路径
    const uploadData = window.courseware.uploadData();  //上传文件必须要的参数 

    const formData = new FormData();
    formData.append("file", file);
    for (const key in uploadData) {
      formData.append(key, uploadData[key]);
    }
    var xhr = new XMLHttpRequest();
    xhr.open("post",uploadUrl);
    //回调
    xhr.onreadystatechange = function () {
      if (xhr.readyState==4 && xhr.status==200){
        callback && callback(xhr.responseText);
      }
    }
    //获取上传的进度
    xhr.upload.onprogress = function (event) {
      if(event.lengthComputable){
        var percent = event.loaded/event.total *100;
        document.querySelector(".upload-file").innerHTML = Math.floor(percent)+"%";
      }
    }
    //将formdata上传
    xhr.send(formData);
  }

</script>
</html>