Webエディタの実験

Web上のエディタを実験してみました。

Treeのライブラリ

jQueryのjQuery File Treeを利用してみました。思ったより実際に利用しているサイトは少ない？

http://abeautifulsite.net/notebook.php?article=58

内容的にはPHPとか各種ライブラリをサーバーにいれて、ファイルのリスト出力してそれをJavaScriptでツリー上に構成しています。ファイル専用なのでツリーとして使うのはちょっと使いにくいのかな？

ただ内容的には普通のツリーとしても利用できるので、ファイルリスト出力部分だけカスタマイズすれば大丈夫みたいです。

ファイルの読みこみ

ツリーは選択までなので読み込み部分を実装します。

view.php

<?php

header("Content-type: text/html; charset=utf-8");
echo htmlspecialchars( file_get_contents( $_GET['file'] ) );

htmlspecialchars()だけ利用してそのまま出力します。

表示

<script type="text/javascript">
	var filename;

	$(document).ready( function() {

		$('#fileTree').fileTree({ root: '../', script: 'jqueryFileTree.php' }, function(file) { 
			function getExtention(path)		//	ファイルパスの拡張子部分を取得
			{
				var fileTypes = new Array();
				fileTypes = path.split(".");
				return fileTypes[fileTypes.length - 1].toLowerCase();
			}
			function getFilename(path)		//	ファイルパスの名前部分を取得
			{
				var fileTypes = new Array();
				fileTypes = path.split("/");
				return fileTypes[fileTypes.length - 1].toLowerCase();
			}

			filename = file;
			$('.filename').text(getFilename(filename));

			var ext = getExtention(file);
			if( ext == 'jpeg' || ext == 'jpg' || ext == 'png' || ext == 'gif' ){
				$('#textarea').hide();
				$('#imgbox').html('<img src="'+file+'" />');
				$('#imgarea').show();
			} else {
				$('#message').text('');
				$('#imgarea').hide();
				$('#textarea').hide();
				$.post( 'view.php?file='+file, {}, function(response) {
					if ($.browser.msie) {
						var str = response.replace(/\r?\n/g, "\r");
						str = str.replace(/&amp;/g, "&");
						str = str.replace(/&lt;/g, "<");
						str = str.replace(/&gt;/g, ">");
						str = str.replace(/&quot;/g, '"');
						$("#loadtext").text(str);
					} else {
					   $("#loadtext").html(response);
					}

					var mode = 'generic';
					if( ext == 'html' || ext == 'htm' ){
						mode = 'html';
					}
					if( ext == 'php' ){
						mode = 'php';
					}
					if( ext == 'js' ){
						mode = 'javascript';
					}
					if( ext == 'css' ){
						mode = 'css';
					}
					if( ext == 'sql' ){
						mode = 'sql';
					}
					if( ext == 'txt' ){
						mode = 'text';
					}
					textbox.edit( 'loadtext', mode );
					$('#textarea').show();
					$('#extmode').text(mode);
				});
			}

		});
		
		$('#save').click( function() {
			$('#message').load( 'save.php?file='+filename, {body:textbox.getCode()} );
		});
	});

</script>

画像はimgタグに変換、それ以外は読み込んでいます。FirefoxはそのままですがIEは一度テキストにしてから突っ込んでいます。あとはファイル名と拡張子でモードをセットしています。

保存

<?php

$file = $_GET['file'];

$fp = fopen( $file, "w" );
if( $fp ){
	$body = stripslashes($_POST['body']);
	fwrite( $fp, $body, strlen($body) ); // ファイルへの書き込み
	fclose($fp);

	echo $file . ':保存成功';
} else {
	echo $file . ':保存失敗';
}

これも普通に保存。

感想

わりと普通に使えます。これならカスタマイズして使いやすいかな？
デザイン以外は満足な結果になりました（笑）

http://akira.info/labs/test/20080902tree.zip