2013年6月5日水曜日

田胡研の勉強会(6月5日)

こんにちは!
B4のtyadです。

今回は田胡研の勉強会でのことを紹介したいと思います。

勉強会

田胡研では定期的に、院生の方々が勉強会を開催してくださいます。
下の写真は今日(6月5日)に開催された勉強会の様子です。


今回の勉強会では院生の山口さんが紹介してくださった、
・HTMLのcontenteditable属性
・JavaScriptのexecCommand
について書きたいと思います。

contenteditable属性

この値をtrueにするとHTMLのコンテンツを直接編集することができます。
まずはこんな感じでHTMLを書いてみましょう。
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style>
    #editor{
      height: 300px;
      width: 600px;
      border: solid 1px;
    }
  </style>
</head>
<body>
  <div id="editor" contenteditable="true"></div>
</body>
</html>
すると下の枠の中に文字がうてると思います。
これがcontenteditableです。

execCommand

これを使うことで、上記のcontenteditableをもっと便利に活用できます。
こんな感じでHTMLファイルを作成。
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style>
    #editor{
      height: 300px;
      width: 600px;
      border: solid 1px;
    }
  </style>
</head>
<body>
  <div id="editor" contenteditable="true"></div>
  <div id="options">
    <button onclick='document.execCommand("bold");'>太字にする</button>
  </div>
</body>
</html>
枠の下の「太字」ボタンを押したあと枠の中を編集すると太字になります。
これはexecCommandに"bold"を指定して使った場合です。
"blod"以外にもコマンドはあるので使ってみてください。

まとめ

勉強会ではこの2つにスクリプトを加えて、リッチテキストエディターとしての動作を実装していました。 山口さん、勉強になりました。ありがとうございました。

0 件のコメント:

コメントを投稿