こんにちは！
B4のtyadです。
今回は田胡研の勉強会でのことを紹介したいと思います。
勉強会
田胡研では定期的に、院生の方々が勉強会を開催してくださいます。
下の写真は今日(6月5日)に開催された勉強会の様子です。
今回の勉強会では院生の山口さんが紹介してくださった、
・HTMLのcontenteditable属性
・JavaScriptのexecCommand
について書きたいと思います。
・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つにスクリプトを加えて、リッチテキストエディターとしての動作を実装していました。
山口さん、勉強になりました。ありがとうございました。
바카라사이트 Thanks for one’s marvelous posting! I seriously enjoyed reading it.
返信削除토토사이트 Appreciate your sharing this one. A must read article!
返信削除토토사이트 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.
返信削除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.
返信削除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
返信削除Nice knowledge gaining article. This post is really the best on this valuable topic. 한국야동닷컴
返信削除Please visit once. I leave my blog address below
국산야동
한국야동닷컴
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
야설
중국야동넷
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
Excellent service and pleased with my purchase. damart discount code Excellent trousers, brilliant service.
返信削除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
返信削除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.
返信削除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.
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.
返信削除Marriage is a fantastic Thing to happen, we are happy you both have been working out your components well
返信削除dua islamic anniversary wishes for husband
happy anniversary daughter and son in law messages
anniversary sweet message for girlfriend
wedding anniversary message for son and daughter in law
good night wishes to girlfriend
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.
返信削除토토 파워볼
토토사이트 카지노
このコメントは投稿者によって削除されました。
返信削除Have been scrolling for this information , finally got the right one . japn aces the technology . No doubt . dissertation writing i is just the thing students will need .
返信削除Customizable
affordable
expert written
24*/7 customer service
I'm glad I was able to gain insights from this great post. Thank you so much for sharing your knowledge! Keep up the fantastic work!
返信削除abogados de bancarrota en Virginia
In my opinion group study is one of the best study. where we can teach and learn together like Wikipedia page maker mansion in their web.
返信削除