Als webbasierter Dateimanager kommt bei mir nach wie vor aufgrund seiner Einfachheit bevorzugt File Thingie zum Einsatz (Download Version 2.5.7). Diesen nutze ich auch gerne, um mal kurz was am Code bestimmter Dateien zu ändern, wenn ich grade keinen FTP-Zugang zum Server habe. Aber leider besteht der Standard-Editor nur aus einem Textfeld, und die im vorigen Beitrag angesprochenen Editor-Plugins wollte ich nicht nutzen, da ich WYSIWYG-Editoren nicht mag und für Code auch gar nicht gebrauchen kann.
Mit Ace gibt es aber auch einen reinen Code-Editor mit sehr gutem Funktionsumfang wie Syntax Highlighting für mehr als 110 Sprachen, verschiedene Themes sowie jede Menge weiterer Anpassungsmöglichkeiten. Dieser muss allerdings erst in File Thingie integriert werden. Nachfolgend möchte ich die dafür nötigen Änderungen aufzeigen.
Anforderungen
– Alle in File Thingie zur Bearbeitung freigegebenen Dateitypen sollen mit Ace dargestellt werden.
– Es soll je nach geöffneter Datei die korrekte Sprache für Syntax Highlighting geladen werden.
– Möglichst wenig Änderungen an der Funktionsweise von File Thingie selbst
Umsetzung
Zuerst müssen in der config.php die Dateitypen festgelegt werden, welche mit File Thingie bearbeitet werden sollen. Dafür sind an 2 Stellen Anpassungen erforderlich:
$ft["settings"]["FILETYPEBLACKLIST"] = ""; // File types that are not allowed for upload.
Nicht vom Kommentar irritieren lassen, diese Option gilt nicht nur für den Upload, sondern die hier eingegebenen Dateitypen werden generell nicht angezeigt.
$ft["plugins"]["edit"] = array(
"settings" => array(
"editlist" => "txt html htm css php js xml",
"converttabs" => FALSE
)
);
Danach geht es weiter mit der Datei edit.plugin.php im plugins-Verzeichnis. Der Editor in File Thingie ist eine einfache textarea. Diese kann von Ace aber nicht direkt verarbeitet werden. Ace ist für die Nutzung mit Containern wie div oder pre ausgelegt. Daher ist es erforderlich, ein neues div anzulegen.
In dieser Datei ist zusätzlich noch die Ermittlung des Dateityp erforderlich. Dazu wird ein zusätzliches verstecktes Eingabefeld angelegt, in welchem nur die Dateiendung der aktuell geladenen Datei gespeichert wird.
// Make form or show lock message.
$split_file = explode(".",$_REQUEST['file']);
$file_ext = $split_file[sizeof($split_file)-1];
$str .= '<form id="edit" action="'.ft_get_self().'" method="post">
<div>
<textarea cols="76" rows="20" name="filecontent" id="filecontent">'.$filecontent.'</textarea>
<div name="ace_editor" id="ace_editor">'.$filecontent.'</div>
</div>
<div>
<input type="hidden" name="file_ext" id="file_ext" value="'.strtolower($file_ext).'"</>
<input type="hidden" name="file" id="file" value="'.$_REQUEST['file'].'" />
<input type="hidden" name="dir" id="dir" value="'.$_REQUEST['dir'].'" />
<input type="hidden" name="act" value="savefile" />
<button type="button" id="save">'.t('Save').'</button>
<input type="submit" value="'.t('Save & exit').'" name="submit" />
<input type="submit" value="'.t('Cancel').'" name="submit" />
<input type="checkbox" name="convertspaces" id="convertspaces"'.($ft['plugins']['edit']['settings']['converttabs'] == TRUE ? ' checked="checked"' : '').' /> <label for="convertspaces">'.t('Convert spaces to tabs').'</label>
<div id="savestatus"></div>
</div>
</form>';
Zu guter Letzt muss in der Datei ft2.php der Ace-Editor eingebunden, aktiviert und der Inhalt des neuen Editor-div in die „alte“ textarea übertragen werden, damit die Änderungen auch gespeichert werden. Die textarea selbst wird ausgeblendet, damit nicht zwei Eingabebereiche ausgegeben werden. Zusätzlich wird geprüft, um welchen Dateityp es sich handelt, um die Syntax Highlighting Regeln für die entsprechende Sprache zu laden.
<style type="text/css">
@import "css/ft.css";
<?php echo implode("\r\n", ft_invoke_hook('add_css'));?>
</style>
<style type="text/css" media="screen">
.ace_editor {
position: relative !important;
border: 1px solid lightgray;
margin: auto;
height: 600px;
width: 800px;
}
</style>
</head>
<body>
<?php echo $str;?>
<?php echo ft_make_scripts_footer();?>
<?php echo implode("\r\n", ft_invoke_hook('destroy'));?>
<script src="./js/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("ace_editor");
editor.setTheme("ace/theme/twilight");
var file_ext = document.getElementById("file_ext").value;
switch(file_ext) {
case "php":
editor.session.setMode("ace/mode/php");
break;
case "js":
editor.session.setMode("ace/mode/javascript");
break;
case "htm":
case "html":
editor.session.setMode("ace/mode/html");
break;
case "css":
editor.session.setMode("ace/mode/css");
break;
case "xml":
editor.session.setMode("ace/mode/xml");
break;
default:
editor.session.setMode("ace/mode/text");
}
var textarea = $('textarea[name="filecontent"]').hide();
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
});
editor.setPrintMarginColumn(false);
</script>
</body>
</html>
Die erforderlichen Dateien für Ace kann man von der Webseite beziehen und beispielsweise im Unterverzeichnis js ablegen (wie im Code dargestellt). Möchte man weitere Dateitypen zur Bearbeitung freigeben, müssen die neuen Endungen wieder in der config.php freigegeben und in der ft2.php als neuer case ergänzt werden.