2014/11/04

[ 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, 'MS Pゴシック', 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>
前の記事:
次の記事: