How to use the ACE editor to edit and save a file

I am a mannequin in HTML. In my project, I want to use the ACE editor to allow the user to edit and save the file. I was able to download the file and open it using the ACE editor. The problem is how to save it. For this part I need your help.

Here is the code I wrote to use 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> 

When I save my modification using the save button, the content is empty. Please do you have an idea how I can do this?

thanks

+6
source share
1 answer

The HTML5 file system API now handles these tasks well. There are several ways to capture the contents of the editor area, and as soon as you do this, you can save it.

Look at something like:

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/

I can’t remember where, but you can use ZIP files together with JS now if you want.

+1
source

All Articles