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

18 件のコメント:

  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

    返信削除
  6. Beautiful. However those who suffered losses and may not feel quite so charitable are no less deserving of our good wishes at this time 야한동영상

    Please visit once. I leave my blog address below
    야설
    야한동영상

    返信削除
  7. Awesome dispatch! I am indeed getting apt to over this info, is truly neighborly my buddy. Likewise fantastic blog here among many of the costly info you acquire. Reserve up the beneficial process you are doing here. 일본야동

    Please visit once. I leave my blog address below
    한국야동
    일본야동

    返信削除
  8. Nice knowledge gaining article. This post is really the best on this valuable topic. 한국야동닷컴

    Please visit once. I leave my blog address below
    국산야동
    한국야동닷컴

    返信削除
  9. I am really happy to say it’s an interesting post to read. I learn new information from your article , you are doing a great job. Keep it up 국산야동

    Please visit once. I leave my blog address below
    야설
    국산야동

    返信削除
  10. Excellent information Providing by your Article thank you for taking the time to share with us such a nice article. 중국야동넷

    Please visit once. I leave my blog address below
    야설
    중국야동넷

    返信削除
  11. QuickBooks Database Manager for Networks is abbreviated as QBDBMGRN. The.exe extension on a filename indicates that the file is executable. In some cases, executable files can harm your computer.
    QBDBMGRN Not Running

    返信削除
  12. Excellent service and pleased with my purchase. damart discount code Excellent trousers, brilliant service.

    返信削除
  13. Delightful. Anyway the individuals who endured misfortunes and may not feel so beneficent are no less meriting our great wishes as of now Best Dissertation Help Online

    返信削除
  14. The best part of SEO is that it is free traffic- - the main condition, car tax calculator remember is the making of important data for the perusers.

    返信削除
  15. Website streamlining has been one of the biggest watchword in the showcasing scene today Best Discount code site
    summer vacation
    london travel guide
    Emporio Armani
    Beach Vacations
    Fashion Discount code
    Beauty Discount code. You could believe that SEO is simply letters however it truly works.

    返信削除
  16. Fare N Flights is best best travel agency in delhi for international tours which helps you book a vacation; We want to be your travel partner who will go the extra mile to help you choose the perfect destination and learn more about the place you've been dreaming of visiting. Since vacations are all about personal choices and interests, we also offer you customizable tour packages. We give you the right to pick and choose anything that matches your interests. No matter how many travel experiences we sell each day, we guarantee that you're the hero of your travel story.

    返信削除
  17. I am very glad to be here.It is so amazing and interesting.I wanna tell you that it is very helpful for us.Thanks for sharing such an awesome blog with us.I want to visit again.

    토토 파워볼
    토토사이트 카지노

    返信削除