書式をセットできるテキストボックスは昔から色々あるけど、軽さやコーディングの容易さなどから、
WYSIWYGで尚且つ「これだ」ってのが、なかなか見つからなかったんだけど、jqueryのプラグインで最近こんなの見つけた。
みなみにWYSIWYGってのは、wikipediaみたく
「**で囲まれてたら太文字ね」「+から始まってる行だったらリストね」
ってゆうテキストボックスではなく、WordPressのテキストボックスのようにｈｔｍｌ上で、まるでデスクトップアプリのリッチテキストボックスかのように動作するテキストボックスの事を指すらしい。
（言葉的には広義だけど、htmlのテキストでいうとそういう感じ）
で、このプラグインを利用したサンプルはこちら。
嫌われ者のクセにかなか完全引退してくれないIE6でも完璧に動くし、何より他のものに比べて非常に軽いので、使ってみる事にした。
Firfoxなどでデバッグしてみると分かるけど、iframeを動的に生成して、それをtextareaに見せかけて動作しているらしい。
WYSIWYGのテキストって、みんなこうゆう作りなのかな。
さて、上記リンク先のサンプルでは幾つかカスタマイズしているので、簡単に解説。
$.cleditor.defaultOptions.docCSSFile = “cleditor_doc.css”
エディタ内の文字は全てpタグでくくらており、エディタ上で文字の行間が広すぎて見えてしまうので、これを防ぐためのスタイル定義。
cleditor_doc.cssの内容としては
p { margin:0; }
とだけ記述してある。
ちなみに、このスタイルファイルの内容にてbody{ background-color:#0000ff;}とかやれば、エディタ内部のスタイルを自在に変更できる。
各ツールボタンの制御はこのプロパティから行う。
$.cleditor.defaultOptions.controls
スペース区切りで使用したいツールボタンの名前を指定する。
IEではアンドゥやリドゥボタンは表示されるものの、使えないみたいなので、消しておいた。
プラグインなんかもあったりして、なかなか使えそうなので、自分の中ではマストになるかも。。
Comments are closed.