Редактор ACE: как переместить измененные данные в $ _POST или $ _GET - PullRequest
Новая
       8

Редактор ACE: как переместить измененные данные в $ _POST или $ _GET

0 голосов
/ 03 июня 2018

Я только что обнаружил редактор ACE сегодня, и я играл с ним, и это довольно гладко.Хотя я не специалист по JavaScript, большая часть функциональности довольно интуитивна.Единственная проблема, с которой я сталкиваюсь, это как перенести изменения в $ _POST, $ _GET или $ _SESSION, когда я закончу редактирование файла?Вы увидите, что я выполняю файл PHP, чтобы сохранить изменения в таблице MySQL.

Вот мой код 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>

1 Ответ

0 голосов
/ 03 июня 2018

Добавьте поле <input type="textarea"> к вашему form, которое скрыто.Добавьте обработчик 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>
...