WYSIWYGエディターというと世間ではFCKeditorが有名ですが、まあ、あれはちょっと重いんじゃない？
ってことで、jQueryのプラグインで探す訳ですが、どーもね、これっていうのがない訳で。
最初に使ってみたのがこれ
LIGHTWEIGHT RICH TEXT EDITOR (RTE / WYSIWYG) PLUGIN FOR JQUERY
使い方はこんな感じ
<textarea name="info1" cols="100" rows="10" class="rte1"></textarea>
<script type="text/javascript">
$(document).ready(function() {
$('.rte1').rte({
css: ['default.css'],
controls_rte: rte_toolbar,
controls_html: html_toolbar
});
});
</script>
jquery.rte.tb.js にツールバーの設定がまとめられてるのでそれを編集する。firebugで見てるとキーを入力する度に
！keyup イベントでは charCode プロパティの値には意味がないため使用すべきではありません。の警告が出るのがいまいちです。
次がこれ
JHTMLAREA - WYSIWYG HTML EDITOR FOR JQUERY
使い方はこんな感じ
<script type="text/javascript">
$(function() {
$("#info").htmlarea({
toolbar: [
["bold", "italic", "underline", "|", "forecolor"],
["p", "h1", "h2", "h3", "h4", "h5", "h6"],
["link", "unlink", "|", "image"],
[{
css: "custom_disk_button",
text: "Save",
action: function(btn) {
alert('SAVE!\n\n' + this.toHtmlString());
}
}]
],
loaded: function() {
//
}
});
});
</script>
<textarea id="info" cols="50" rows="15"></textarea>
loaded とかでエディターが起動した後になにか処理を入れられる。ドキュメントがあまり詳しくなくていまいちですかねー。
Microsoft Public License というあまり聞いたことのない？ライセンスです。
最後にこれ
HTMLBOX
使い方はこんな感じ
<textarea id='hb'></textarea>
<script language="Javascript" type="text/javascript">
var hb = $("#hb").htmlbox({
buttons:[
["separator_dots","bold","italic","underline"]
],
icons:"default",
skin:"green"
});
</script>
一応PDFのドキュメントがあるんですが、どうも説明が足りなくて使い方が分からない。UndoRedoManager plugin とか。
おもしろそうなんだけど、さっぱりわからんのだー。
ま。最後のが一番よさそうですけどね。
で、今回の課題はこのエディターで文字を入力してる最中にそのイベントを取りたいってことなんだけども、
そもそもこういうエディターというのはフォームの textarea に設定するけれども、textarea そのものは非表示にして、その近くに iframe をつっこんで
<div> <iframe style="height: 305px; width: 415px;"> <html> <head> </head> <body> </body> </html> </iframe> </div>みたいにして。
でhtmlを表示させて機能しているようで、DOMがどうなってるんだかさっぱり分からない。
どういうからくりになってるんだか・・・。
で、結論から言うと、
編集中の文字とかを取り出すには
$('iframe').contents().find('body').html()
keyupのイベントを取り出すには、
$('iframe').contents().keyup(function(){
// なにか処理
}
でいけます。試しに文字を入力する度にその中の文字数を表示するというのをやってみると、
<script language="Javascript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="Javascript" src="htmlbox.min.js" type="text/javascript"></script>
<script language="Javascript" src="formState.js" type="text/javascript"></script>
<textarea id='hb'></textarea>
<script language="Javascript" type="text/javascript">
var hb = $("#hb").htmlbox({
buttons:[
["separator_dots","bold","italic","underline"]
],
icons:"default",
skin:"green"
});
$(function() {
$('iframe').contents().keyup(function(){
$('#count').val($('iframe').contents().find('body').text().length);
});
});
</script>
<input type="text" id="count" />
こんな感じになります。
