第22回 リアルタイムプレビュー付きのHTMLエディタを作ろう – jQuery入門
2009 年 11 月 14 日 投稿者: naga3
※今回はほとんど一発ネタです。
仕事で「リアルタイムで結果を確認できるHTMLエディタを作ってくれ」という要件があり、途方に暮れました。TinyMCEかCKeditorを導入しようかとも考えたのですが、よく考えたらリアルタイムプレビューだけならJavaScript数行で実装できるじゃん、と思い自分で作ることにしました。
HTMLエディタのデモ
セキュリティ的にまずい気がするのでzipです。ローカルで実行してください。htmleditor.zip
ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(function() {
$('body').keyup(function() {
$('#preview').html($('#src').val());
});
});
</script>
</head>
<body>
<p>以下にHTMLを書くとタグを含めて即座に反映されます。</p>
<textarea id="src" rows="10" cols="80">
<img src="santa.gif" />サンタさん
</textarea>
<hr />
<div id="preview"></div>
</body>
</html>
