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つにスクリプトを加えて、リッチテキストエディターとしての動作を実装していました。 山口さん、勉強になりました。ありがとうございました。

5 件のコメント:

  1. 바카라사이트 Thanks for one’s marvelous posting! I seriously enjoyed reading it.

    返信削除
  2. 토토사이트 Appreciate your sharing this one. A must read article!

    返信削除
  3. 토토사이트 Greetings! I know this is kinda off topic however , I’d figured I’d ask.Would you be interested in trading links or maybe guest writing a blog post or vice-versa? My site addresses a lot of the same topics as yours and I believe we could greatly benefit from each other.

    返信削除
  4. Before you Buy Master Dissertation Online, you need to realize that you need this kind of academic service. In our experience, only 1 in 3 students manages to complete his or her dissertation.

    返信削除
  5. What will happen if we give 100% value to height and width? Will the size of our Bold Button remain normal, or will it cover our entire window? Cheap Assignment Writing Services

    返信削除