[Tool] 開発備忘録 WYSIWIGエディタ作る話。#02 BOLD対応

千里の道も一歩からとは、よく言ったもので、一歩を踏み出せないと、千里先のゴールには絶対に辿り着けないですからね。 こんな当たり前のことを、グジグジ悩んで、一歩すら踏み出せない人も多く、相談も数多く受けるんですが、 みんな背中押してもらいたいだけのような気もします。 はじめの一歩、自分で踏み出す事ができる人とできない人の差って、ものすごく差の大きな一歩なのかもしれません。 そんな道の長そうなWYSIWIG開発の今回は、入力した文字を部分的に太文字（BOLD）にしてみたいと思います。

デモ

Bold 上記の入力欄に書かれている文字（別の文字を書いても構いません）を選択して、BOLDボタンを押すと、その箇所を太文字にするというだけの処理です。

解説

inputやtextareaなどの文字入力系タグに関しては、入力文字を選択するのは、 selectionStartと、selectionEndで、文字列のindex番号を取得する事ができ、それを元に選択箇所をバイト単位で特定する事ができたんですが、 iframe内のdesignModeに入力している文字列の選択箇所を知るにはどうしたらいいのだろう？ という始めの壁が発生しました。 これに対しては、"getSelection()"という便利な関数があるという事がわかり、 "getRange()"で選択箇所を取得できるという事がわかりました。 取得したrangeに対して、"range.extractContents()"とすることで、現在選択箇所のNodeを返してくれます。 取得した文字列（選択箇所）を一旦別の新規タグを作って一旦隔離して、その中の文字列に対して、ボールド用のBタグを前後に追加して、 元あった位置に内容だけ戻すという処理をしています。 "document.createDocumentFragment()"というのは、特定のタグを作らずに、新たな要素を定義できるやり方で、 無駄にdivが増えるのが気持ち悪かったので、使ってみました。 最後に、入れ替えた文字列の選択箇所が無くなっているので、選択箇所の復元をおこなうようにします。 新しく作った箇所の要素を"addRange()"してあげると、選択してくれるという便利な機能でした。

あとがき

選択して、boldにするだけの仕組みですが、実はこの機能を使うと、他の囲タグはなんでも設置できてしまうという事に気がつきました？ そう、イタリックも、アンダーラインも、blockquoteも、h1やh2などのヘッダタグなども、HTMLは、ほとんどが囲み文字です。 選択箇所をと特定してそれを元に操作するというのが、WYSIWIGの半分以上の割合をしめているんじゃないでしょうか？ そんな貴重な第一歩を本日踏み出しました。 なんかもう、他のWYSIWIGエディタが不便に思えて仕方なくなってきました。いっそのこと世の中全て自分のライブラリで統一して欲しいぐらいです。（ムリです）