🕒 2014/11/04
🔄 2023/04/22
[ jQuery ] ライブプレビュー付のHTMLエディタを5行で作る
jQueryを使って、ブラウザ上で動く、ライブプレビュー付の超超シンプルなHTMLエディタを作りたいと思います。エディタはtextareaでいいとして、そのプレビューは、textareaの内容をそのままdivなどの要素に反映すればOK。これをライブでやるには、textareaのkeyupのたびに要素反映すればできます。なので、次のように5行で書くことができます。
$(function(){
$('textarea').keyup(function(){
$('div').html( $('textarea').val() );
});
});
htmlは、これだけ。これだけで動きます。
<textarea></textarea>
<div></div>
個人的に、全画面で表示したかったので、全体では次のようにしました。
<!DOCTYPE html>
<html>
<head>
<title>Super Simple HTML Editor</title>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
html, body{
margin: 0;
padding: 0;
}
html, body, textarea, div {
height: 100%;
font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
textarea, div {
overflow-y: scroll;
resize: none;
float: left;
box-sizing: border-box;
width: 50%;
line-height: 1.75em;
letter-spacing: 1px;
word-wrap: break-word;
padding: 20px;
}
</style>
</head>
<body>
<textarea></textarea>
<div></div>
<script>
$(function(){
$('textarea').keyup(function(){
$('div').html( $('textarea').val() );
});
});
</script>
</body>
</html>