[TinyMCE] テキストエリアに一瞬だけ表示されるHTMLソースを表示させない方法

TinyMCE per WP
Creative Commons License photo credit: -= Treviño =-

Javascriptで書かれたリッチテキストエディタTinyMCEに関して困ったことがあったので、メモ。

何が問題?

TinyMCEはtextarea要素を便利なリッチテキストエディタに変換してくれるライブラリです。
TinyMCEを使うとテキストエリアの見た目がイカのように変わります。

TinyMCE適用前

TinyMCE適用後

HTMLソースが一瞬だけ表示される問題

で、何が問題かというと、ブラウザがページをロードしてからTinyMCEが適用されるまでに若干のラグが存在するんです。

そのため、本当に一瞬ですが、ブラウザ上にTinyMCE適用前のテキストエリアが表示されてしまいます。生のHTMLソースがユーザに見えてしまうので、これはあまり美しいものではありません。

これを回避する何かうまい方法はないかなぁ、と困っていました。

対処法

実はTinyMCE、WordPressやFacebookなど、色々なシステムのリッチテキストエディタとして採用されています。そして、WordPressでは一瞬だけHTMLソースが表示されるようなことはありません。

「じゃぁ、WordPressはこの問題にどうやって対処しているんだろう?」ということで実際に検証してみました。

検証結果
  • WordPressは、TinyMCE適用前のテキストエリアに表示されるHTMLソースの文字色をCSSで白色(背景色)に設定し、擬似的にユーザに見えないようにしている。

正直驚きました。もう少しスマートな方法で対処してるかなぁと思ったんですけど、なんというか力技!
(そのスマートな方法がなんなのか、僕はわからないんですけどね!)

実際に試してみる

例えば以下のようにテキストエリアにCSSを適用することで、一瞬だけ表示されていたHTMLソースを隠す事ができます。

<textarea style="color: #ffffff;" cols="40" rows="10" name="content">
・・・・
</textarea>

結果は以下のとおり。スペルチェック機能が動作して、何も無いように見えるところにスペルミスの赤線が表示されていますが、これはまた別問題ですね。。

まとめ

今回のようにに、何らかのライブラリを使っていて困ったことがあった場合は、同じライブラリを使っている他のソフトウェアではどう対処しているのか、一度調べてみるのがいいかもしれません。

しかし、他にも対処方法はないのかなぁ。もし知っている方がいらっしゃれば、是非教えてください!

それでは!