2014-04-10 13 views
6

Sono un manichino in HTML. Nel mio progetto, voglio usare l'editor ACE per consentire all'utente di modificare e salvare un file. Riusco a caricare il file e ad aprirlo con l'editor ACE. Il problema è come salvarlo. Per questa parte, ho bisogno del tuo aiuto.Come utilizzare l'editor ACE per modificare e salvare un file

Ecco il codice che ho scritto per utilizzare ACE.

<?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> 

Quando ho salvare il mio modifica, utilizzando il pulsante Salva, il contenuto è vuoto. Per favore, hai un'idea di come posso farlo?

Grazie

+0

Div non è un elemento del modulo. Probabilmente avrai bisogno di un altro input o area di testo che è nascosta e quando si fa clic su Salva popola l'input nascosto con il contenuto di div e continua a inviare il modulo – ElefantPhace

risposta

1

L'API HTML5 Filesystem gestisce le attività di questo tipo piuttosto bene ora. Ci sono alcuni modi per catturare il contenuto dell'area dell'editor e, una volta fatto, puoi salvarlo.

Guardate qualcosa di simile:

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/

Non ricordo dove, ma è possibile comprimere i file insieme usando JS ora pure, se lo desiderate .

Problemi correlati