实现文本预览和编辑保存功能

controllers/HomeController.php

@@ -330,15 +330,16 @@ class HomeController extends Controller
      * 注意,已存在的同名文件会被覆盖
      * https://devs.chenx221.cyou:8081/index.php?r=home%2Fupload
      *
-     * @return int
+     * @return int|Response
      */
-    public function actionUpload(): int
+    public function actionUpload()
     {
         $model = new UploadForm();
         $model->targetDir = Yii::$app->request->post('targetDir', '.');
         $uploadedFiles = UploadedFile::getInstancesByName('files');
         $successCount = 0;
         $totalCount = count($uploadedFiles);
+        $sp = Yii::$app->request->post('sp', null);
 
         foreach ($uploadedFiles as $uploadedFile) {
             $model->uploadFile = $uploadedFile;
@@ -349,7 +350,15 @@ class HomeController extends Controller
                 $successCount++;
             }
         }
-
+        if ($sp === 'editSaving') {
+            if ($successCount === $totalCount) {
+                Yii::$app->response->statusCode = 200;
+                return $this->asJson(['status' => 200, 'message' => 'All files uploaded successfully.']);
+            } else{
+                Yii::$app->response->statusCode = 500;
+                return $this->asJson(['status' => 500, 'message' => 'Failed to upload files.']);
+            }
+        }else {
             if ($successCount === $totalCount) {
                 Yii::$app->session->setFlash('success', 'All files uploaded successfully.');
             } elseif ($successCount > 0) {
@@ -358,7 +367,8 @@ class HomeController extends Controller
                 Yii::$app->session->setFlash('error', 'Failed to upload files.');
             }
             //返回状态码200
-        return Yii::$app->response->statusCode = 200; // 如果出错请删掉return
+            return Yii::$app->response->statusCode = 200; // 如果出错请删掉return}
+        }
     }
 
     /**

views/home/index.php

@@ -6,6 +6,7 @@
 
 /* @var $directory string 当前路径 */
 
+use app\assets\AceAsset;
 use app\assets\PlyrAsset;
 use app\assets\ViewerJsAsset;
 use app\models\NewFolderForm;
@@ -28,6 +29,7 @@ FontAwesomeAsset::register($this);
 JqueryAsset::register($this);
 ViewerJsAsset::register($this);
 PlyrAsset::register($this);
+AceAsset::register($this);
 $this->registerCssFile('@web/css/home_style.css');
 ?>
 <div class="home-directory">
@@ -150,6 +152,8 @@ $this->registerCssFile('@web/css/home_style.css');
                             <?= Html::a($item['name'], ['home/preview', 'relativePath' => $relativePath], ['class' => 'file_name', 'onclick' => 'previewImage(this, event)']) ?>
                         <?php elseif ($item['type'] === 'fa-regular fa-file-video'): ?>
                             <?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewVideo(this, event)']) ?>
+                        <?php elseif ($item['type'] === 'fa-regular fa-file-lines' || $item['type'] === 'fa-regular fa-file-code' || $item['type'] === 'fa-solid fa-gears'): ?>
+                            <?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'textEdit(this, event)']) ?>
                         <?php elseif ($item['type'] === 'fa-regular fa-file-audio'): ?>
                             <?= Html::a($item['name'], ['home/download', 'relativePath' => $relativePath, 'type' => $item['rawType']], ['class' => 'file_name', 'onclick' => 'previewAudio(this, event)']) ?>
                         <?php else: ?>
@@ -298,6 +302,19 @@ echo '<audio id="aPlayer" controls>
   <source src="" type="">
 </audio>';
 
+Modal::end();
+
+Modal::begin([
+    'title' => '<h4>文本编辑</h4>',
+    'id' => 'textEditModal',
+    'size' => 'modal-lg',
+]);
+
+echo'<div class="alert alert-success" role="alert" id="ed-alert-success">保存成功</div><div class="alert alert-danger" role="alert" id="ed-alert-fail">保存失败</div>';
+echo '<button id="saveButton" class="btn btn-outline-primary" style="margin-bottom: 16px"><i class="fa-regular fa-floppy-disk"></i> 保存文件</button>';
+echo '<input type="hidden" id="edFilename" value="">';
+echo '<div id="editor" style="width: 100%; height: 500px;"></div>';
+
 Modal::end();
 $this->registerJsFile('@web/js/home_script.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
 ?>

web/js/home_script.js

@@ -197,26 +197,6 @@ $(document).on('click', '#generate_access_code', function () {
     $('#shareModal #share-access_code').val(accessCode);
 });
 
-// $(document).on('submit', '#share-form', function (event) {
-//     event.preventDefault();
-//
-//     var relativePath = $('#shareModal #share-file_relative_path').val();
-//     var accessCode = $('#shareModal #share-access_code').val();
-//
-//     $.ajax({
-//         type: "POST",
-//         url: "index.php?r=share%2Fcreate",
-//         data: { file_relative_path: relativePath, access_code: accessCode },
-//         success: function() {
-//             // 处理响应
-//             location.reload();
-//         },
-//         error: function() {
-//             // 处理错误
-//             console.error('AJAX request failed.');
-//         }
-//     });
-// });
 $(document).on('click', '.shares-btn', function () {
     var relativePath = $(this).closest('tr').find('.select-item').data('relativePath');
     $('#shareModal #share-file_relative_path').val(relativePath);
@@ -448,6 +428,7 @@ videoModal.on('hidden.bs.modal', function () {
 //music preview
 var aPlayer;
 var audioModal = $('#audioModal');
+
 function previewAudio(element, event) {
     event.preventDefault();
     var audioElement = document.getElementById('aPlayer');
@@ -460,8 +441,68 @@ function previewAudio(element, event) {
     // 显示模态框
     audioModal.modal('show');
 }
+
 audioModal.on('hidden.bs.modal', function () {
     if (aPlayer) {
         aPlayer.destroy();
     }
 });
+
+//text edit
+var editor;
+var editorModal = $('#textEditModal');
+
+function textEdit(element, event) {
+    event.preventDefault();
+    editorModal.modal('show');
+    var fileUrl = element.href;
+    $('#edFilename').val(element.innerText);
+    $('#ed-alert-success').hide();
+    $('#ed-alert-fail').hide();
+    $.get(fileUrl, function (data) {
+        editor = ace.edit("editor");
+        editor.session.setOption("useWorker", false);
+        editor.setTheme("ace/theme/github");
+        editor.renderer.setOption("fontSize", 15);
+        editor.renderer.setOption("animatedScroll", true)
+        editor.session.setMode("ace/mode/text");
+        editor.setValue(data);
+    });
+}
+
+editorModal.on('hidden.bs.modal', function () {
+    if (editor) {
+        editor.destroy();
+        // editor.container.remove();
+    }
+});
+$('#saveButton').on('click', function () {
+    var content = editor.getValue();
+    var blob = new Blob([content], {type: "text/plain"});
+    var file = new File([blob], $('#edFilename').val(), {type: "text/plain"});
+    var formData = new FormData();
+    formData.append('files', file);
+    formData.append('sp', 'editSaving');
+    formData.append('targetDir', $('#target-dir').val());
+
+    $.ajax({
+        type: "POST",
+        url: "index.php?r=home%2Fupload", // 替换为你的上传URL
+        data: formData,
+        processData: false, // 告诉jQuery不要处理发送的数据
+        contentType: false, // 告诉jQuery不要设置Content-Type请求头
+        success: function (data) {
+            if (data.status === 200) {
+                $('#ed-alert-success').show();
+                $('#ed-alert-fail').hide();
+            } else {
+                $('#ed-alert-success').hide();
+                $('#ed-alert-fail').show();
+            }
+        },
+        error: function () {
+            $('#ed-alert-success').hide();
+            $('#ed-alert-fail').show();
+        }
+    });
+});