ACE 编辑器：如何将更改的数据移动到 $_POST 或 $_GET

Question

我今天才发现 ACE 编辑器，我一直在玩它，它非常漂亮。尽管我不是 JavaScript 方面的专家，但大多数功能都非常直观。我遇到的唯一问题是如何在完成文件编辑后将更改移至 $_POST、$_GET 或 $_SESSION？您会看到我正在执行 PHP 文件以将更改保存到 MySQL table.

这是我的 Html/JavaScript 代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>ACE in Action</title>
  <style type="text/css" media="screen">
    body {
      background-color: #ffff;
      color: #333;
      margin: 0;
      padding: 0;
    }
    
    .editor_container {
      text-align: center;
    }
    
    .editor_container form {
      margin: 45px;
      width: 90%;
      border: thin #333;
      border-radius: 8px;
      text-align: center;
    }
    
    .ace_gutter-cell {
      color: white;
      !important
    }
  </style>
</head>

<body>
  <div class="editor_container">
    <h1>Ace Editor</h1>
    <form action="update.php" method="post">
      <h2>Edit the CSS file</h2>
      <div id="editor" title="css edit:" style="height: 500px; width: 80%; float: right;">
        .wrdAdmin { border-radius: 8px; border: solid thin #333; margin: auto; padding: 40px; position: relative; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ededed+100 */ background: #ffffff; /* Old browsers
        */ background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffffff 0%,#ededed 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ } .wrdAdmin h1 { font-size: 18pt; font-weight: bold; padding-bottom:
        12px; } .wrdAdmin h2 { font-size: 16pt; font-weight: bold; padding-bottom: 10px; } .wrdAdmin h3 { font-size: 14pt; font-weight: bold; padding-bottom: 8px; } .wrdAdmin h4 { font-size: 12pt; font-weight: bold; padding-bottom: 6px; } .wrdAdmin hr
        { border: thin solid #333; margin-bottom: 12px; }
      </div>
      <br><br>
      <input type="submit" value="Submit">
    </form>
  </div>

  <script src="/Ace/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
  <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/ambiance");
    editor.session.setMode("ace/mode/css");
    document.getElementById('editor').style.fontSize = '1vw';
  </script>
</body>

</html>

Answer 1

向隐藏的 form 添加一个 <input type="textarea"> 字段。添加一个 JavaScript 处理程序来检测您的表单何时被提交。此处理程序应将隐藏输入字段的值设置为 ACE 编辑器的当前值。然后就可以从PHP.

读取输入域的值了

这是您修改后的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>ACE in Action</title>
  <style type="text/css" media="screen">
    body {
      background-color: #ffff;
      color: #333;
      margin: 0;
      padding: 0;
    }

    .editor_container {
      text-align: center;
    }

    .editor_container form {
      margin: 45px;
      width: 90%;
      border: thin #333;
      border-radius: 8px;
      text-align: center;
    }

    .ace_gutter-cell {
      color: white;
      !important
    }
  </style>
</head>

<body>
  <div class="editor_container">
    <h1>Ace Editor</h1>
    <form action="update.php" method="post" id="myForm">  <!-- ID added here -->
      <input name="foo" type="text" hidden id="editortext"> <!-- hidden text field here added here-->
      <h2>Edit the CSS file</h2>
      <div id="editor" title="css edit:" style="height: 500px; width: 80%; float: right;">
        .wrdAdmin { border-radius: 8px; border: solid thin #333; margin: auto; padding: 40px; position: relative; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ededed+100 */ background: #ffffff; /* Old browsers
        */ background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffffff 0%,#ededed 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ } .wrdAdmin h1 { font-size: 18pt; font-weight: bold; padding-bottom:
        12px; } .wrdAdmin h2 { font-size: 16pt; font-weight: bold; padding-bottom: 10px; } .wrdAdmin h3 { font-size: 14pt; font-weight: bold; padding-bottom: 8px; } .wrdAdmin h4 { font-size: 12pt; font-weight: bold; padding-bottom: 6px; } .wrdAdmin hr
        { border: thin solid #333; margin-bottom: 12px; }
      </div>
      <br><br>
      <input type="submit" value="Submit">
    </form>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="text/javascript" charset="utf-8"></script>
  <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/ambiance");
    editor.session.setMode("ace/mode/css");
    document.getElementById('editor').style.fontSize = '1vw';

    // added event handler
    document.getElementById("myForm").onsubmit = function(evt) {
      document.getElementById("editortext").value = editor.getValue();
    }
  </script>
</body>

</html>

ACE 编辑器：如何将更改的数据移动到 $_POST 或 $_GET

ACE editor: how to move changed data to $_POST or $_GET

html

javascript

ace-editor