jquery で WYSIWYG をやってみる。

寝ずの更新「ゆうじろう」です。
まぁ、目の奥が痛いです。
そして楽しいです。

さて、題名の通り、jquery使って、WYSIWYGを実現しようとやってみます。

正直ここにアクセスすればできます。
http://jhtmlarea.codeplex.com/

が、文字の色を変えるボタンを表示するのだけ少しまよったので追記。

１．同袍されている「jHtmlArea.ColorPickerMenu.css」を読み込む

<link href="style/jHtmlArea.ColorPickerMenu.css" rel="Stylesheet" type="text/css" />

２．同胞されている「jHtmlArea.ColorPickerMenu-x.x.x.js」を読み込む

<script type="text/javascript"  src="scripts/jHtmlArea.ColorPickerMenu-0.7.0.min.js"></script>

３．TextAleaを実行するときにToolbar指定を行い、その中にColorを入れる。

$("#information").htmlarea(
       			{
	                 toolbar: ["html", "|",
	                         "forecolor",  // <-- Add the "forecolor" Toolbar Button
	                         "|", "bold", "italic", "underline", "|", "h1", "h2", "h3", "|", "link", "unlink"] // Overrides/Specifies the Toolbar buttons to show
                }		
        	);

で完成。

ツールボタンの種類については、「jHtmlArea.css」に書いてある様子。

ちなみに、サポートブラウザは次のようになっているようです。

• Internet Explorer 7/8
• Firefox 3/3.5
• Safari 4

はぁ、クロムがない。