2014-04-10 6 views
6

Ich bin ein Dummy in HTML. In meinem Projekt möchte ich den ACE-Editor verwenden, damit der Benutzer eine Datei bearbeiten und speichern kann. Es ist mir gelungen, die Datei zu laden und mit dem ACE-Editor zu öffnen. Das Problem ist, wie man es speichert. Für diesen Teil brauche ich deine Hilfe.So verwenden Sie den ACE-Editor zum Bearbeiten und Speichern einer Datei

Hier ist der Code, den ich schrieb, um ACE zu verwenden.

<?php 
if(isset($_POST["save_modification"])){ 
$file = "./".$_POST["file_name"]; 
$file_ptr=fopen($file,"w"); 
fwrite($file_ptr,$_POST["content"]); 
fclose($file_ptr); 
}?> 

<html> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" media="all" type="text/css" href="./css/style.css" /> 
<title>Test</title> 
</head> 

<body> 
<div class="site"> 
    <div class="header"> 
     <span>Test</span> 
    </div> 
</div> 

<div class="clean"></div> 

<div class="corp"> 
    <div class="corp_ctn"> 
     <h1>Edit a file</h1> 

     <div id="content" class="paragraphe"> 

      <?php 
       $dir=opendir("./"); 
       while($file=readdir($dir)){ 
        if(!in_array($file, array(".",".."))) { 
         echo '<div style="float:left; margin:0 10px; text-align:center;"><a href="?f='.$file.'">'; 
         echo $file; 
         echo '</a></div>'; 
         echo '<br/>'; 
        } 
       } 
      ?> 

      <br clear="all"/> 

      <?php 
       if(isset($_GET["f"])) { 
        echo "<h1>{$_GET["f"]}</h1>"; 
        $file = "./".$_GET["f"]; 
        $content = file_get_contents($file); 
      ?> 


        <form method="POST" action="index_select_lua_script.php"> 
         <div id="editor" name="content" style="width:100%;height:200px;"> 
          <?php echo $content ?> 
         </div> 

         <script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script> 
         <script> 
          var editor = ace.edit("editor"); 
          editor.setTheme("ace/theme/monokai"); 
          editor.getSession().setMode("ace/mode/lua"); 
          editor.getSession().setTabSize(4); 
          editor.setHighlightActiveLine(true); 
          editor.resize(); 
         </script> 
         <input type="hidden" name="file_name" value="<?php echo $_GET["f"] ?>" /> 
         <input type="submit" name="save_modification" value="Save modification" /> 
        </form> 
        <br/><br/> 
      <?php 
       } 
      ?> 
      </div> 
     </div> 
    </div> 
</div> 

Wenn ich meine Änderung zu speichern, die Taste speichern verwendet wird, ist der Inhalt leer. Bitte, hast du eine Idee, wie ich das machen kann?

Danke

+0

Div ist kein Formularelement. Sie werden wahrscheinlich eine andere Eingabe oder einen Textbereich benötigen, der ausgeblendet ist. Wenn Sie auf Speichern klicken, füllen Sie versteckte Eingaben mit Inhalt aus div und fahren Sie mit dem Senden des Formulars fort – ElefantPhace

Antwort

1

Die API HTML5-Dateisystem behandelt Aufgaben wie das jetzt ganz gut. Es gibt ein paar Möglichkeiten, den Inhalt des Editorbereichs zu erfassen, und sobald Sie das erledigt haben, können Sie ihn speichern.

Schauen Sie sich so etwas wie:

http://www.codeproject.com/Articles/668351/HTML-File-API-Capability-and-Compatibility

http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis

http://www.html5rocks.com/en/tutorials/file/filesystem/

Kann mich nicht daran erinnern, wo, aber Sie können Dateien zusammen ZIP JS verwenden jetzt auch, wenn Sie so wollen, .

Verwandte Themen