CODEWITHSUNDEEP
javascriptphphtmlace-editor
user3503597
user3503597

Reputation: 71

How to use ACE editor to edit and save a file

I'm a dummy in HTML. In my project, I want to use ACE editor to allow the user editing and saving a file. I succeed to load the file, and to open it with 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 of how I can do it?

Thank you

Upvotes: 6

Views: 7683

Answers (1)

Sandeep Shah
Sandeep Shah

Reputation: 41

The HTML5 Filesystem API handles tasks like this quite well now. There are a few ways of capturing the contents of the editor area, and once you've done that 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/

Can't remember where, but you can ZIP files together using JS now as well, if you so wish.

Upvotes: 1

Related Questions