easai's Get Technical page: ＨＴＭＬエディターを１行で書く

木曜日, 5月 01, 2014

ＨＴＭＬエディターを１行で書いてみました。

要するに、書いたＨＴＭＬがそれっぽく見えればＷＹＳＩＷＹＧってわけですよね。

じゃあ、書いたものをそのままブラウザ表示すりゃいいわけじゃないですか。

	<html>
	<head>
	<style>
	textarea,
	div#results
	{
	width:1500px;
	height:460px;
	}
	</style>
	<script src="../includes/scripts/js/lib/jquery-1.7.2.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function()
	{
	$("textarea").keyup(function(){
	$("div#results").html($("textarea").val());
	});
	});
	</script>
	</head>

	<body>

	<div id="results">
	</div>

	<form action="editor.php">
	<textarea name="text">
	</textarea>
	</form>

	</body>
	</html>

view raw HTMLEditor.php hosted with ❤ by GitHub

これを動かすと、何もないテキストボックスが下のほうに表示されます。

適宜ＨＴＭＬコードを入力してみましょう。

画面上部に結果が表示されます。

リアルタイムでＨＴＭＬコードが編集できます。

ちょっとしたプレビューにも使えます。

easai's Get Technical page