TinyMCEの使い方SimpleMDEをしばらく使っていたが色を付けたいというような要望があって、そりゃマークダウンにはないし、かといって直接spanを書かせるわけにもいかないし、というわけでいろいろWYSIWYG系のブラウザ用エディターを調べて、結局TinyMCEに落ち着いた。ドキュメントがいまいちわかりにくくて、どのプラグインが追加有償なのかといったこともなかなかわかりにくい。そのあたりは解決して(一番使いたいのはTextColorでこれはデフォルトプラグインだし、次に使いたいのはTableで、これもデフォルトプラグインだった)が、一番の問題点は、入力されたデータをどう扱えるか、だった。それ以外の使い方はなんかおかしなドキュメント(懇切丁寧だが、同じことを何度も何度も繰り返して書いてあるコピペプログラミングみたいな感じ)に書いてあるし、日本語でもうすこしまともに整理してくれてあるサイトもある(今ググってみつけた)。知りたいのに素直にわからないのは次の2点だ。前者は、AJAXでサーバーへ送信したり、保存したデータをサーバーで初期設定するときに必要だし、後者はサーバーへ送信するタイミングを得るために必須だ。.classとか)})と、ラップするtextareaのセレクタを与えればすぐに使えるすぐれものではあるが、ドキュメントにはtextareaをフォームに入れればsubmitされるからOKみたいにしか書いてない。ユーザーが長い文章を入力して一息つこうとした瞬間にWordはクラッシュしブラウザーはハングしたりクラッシュする。Submitを待ってはならない道理だ。最初は単純に$('#textarea').val()とすれば取り出せるのではないかと思ったが、ラップさせるTEXTAREAそのものは本当に単なるダミーとしてしか利用していないらしくて入力はまったく反映されない(逆方向はサポートしていてTEXTAREAにあらかじめ設定した内容は初期値としてロードされる)。そのあたりのJS用のAPIがいまひとつわかりにくかったので以下にまとめる。})IDをtinymceに与えて取得する。セレクタではなくIDなので#を付けてはだめ。tinymce.editors配列から探す。エディタオブジェクトの破壊方法(textareaの破壊前に行う。ないとおかしなことが起きる)IDを指定する。この例は意味ない入力内容の取り出しDOMとして取得できるが、ここではサーバーへ送信したりするための方法なので文字列(つまりパーシャルHTML)の取得方法。これで<p>入力したよ。</p>みたいなのが取得できる。内容設定textareaにあらかじめgetContent()で取り出したパーシャルHTMLを埋め込む。エディタのsetContent(パーシャルHTML)メソッドを呼ぶ。ここまでわかると、後は、取り出しタイミングさえ得られればAJAXでサーバーへ入力内容を随時送信できる。取り出しタイミングは、サーバーとの通信が遅ければblur一択だろうが、そうでなければ、エディターのchangeイベント(エディターがアンドゥポイント生成後に発火)、undoイベント(ユーザーがアンドゥを呼んだ後に発火)、redoイベント(ユーザーがリドゥした後に発火)の3イベントを見張るのが良いと思う。どのイベントでも同じサーバーへの内容送信を行うのだから、tinymce.initの引数で与えれば良い。ドキュメントではChangeのように大文字始まりで書いてあるが、小文字始まりでOK。大文字始まりでどうかは試していない。