如何使用 ACE 编辑器编辑和保存文件答案

【问题标题】：How to use ACE editor to edit and save a file如何使用 ACE 编辑器编辑和保存文件
【发布时间】：2023-10-04 00:04:01
【问题描述】：

我是 HTML 中的假人。在我的项目中，我想使用 ACE 编辑器来允许用户编辑和保存文件。我成功加载文件，并用 ACE 编辑器打开它。问题是如何保存。对于这一部分，我需要你的帮助。

这是我编写的使用 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>

当我使用保存按钮保存我的修改时，内容为空。请问，你知道我该怎么做吗？

谢谢

【问题讨论】：

Div 不是表单元素。您可能需要另一个隐藏的输入或文本区域，当单击保存时，使用 div 中的内容填充隐藏的输入并继续提交表单

标签： javascript php html ace-editor

【解决方案1】：

HTML5 文件系统 API 现在可以很好地处理此类任务。有几种方法可以捕获编辑器区域的内容，一旦完成，您就可以保存它。

看看类似的东西：

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/

不记得在哪里，但如果你愿意的话，你现在也可以使用 JS 压缩文件。

【讨论】：