jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

ブラウザで使うWYSIWYGエディターを作るときのcreateRangeとかselectionなんかの処理

2015年3月5日
この記事は掲載から812日経過しています。
情報が古い可能性が有りますのでご了承下さい

WordPressでこうして記事を書く時に、文字色を変えたりできるエディターを使いますが、簡単なものなら自作する事も可能です。また、多くの方が有償・無償でWYSIWYGエディターリッチテキストエディターを作成・公開しています。

TinyMCEが有名でしょうか、ただ、商用だとライセンスの問題が出てきます。MITライセンスのものも有りますが、一番欲しい画像アップロード機能が無くがっくりくることも。

お客さんってたいがい、記事を書くのと画像をアップロード出来る、これを求めますので、ここは抑えておきたいポイントですよね。あと機能過多で使わないものが多く、削るのが面倒です。

で、人のを借りるのも癪だし高いライセンス料を払いたくないですし、どうせなら機能を限定して導入し易いものを作ればオープンソースにも導入し易いだろうなぁと思い、テスト用のとってもちゃちぃ(←方言?)ものを作ってみました。

サンプル

一応はIE8以上対応って事で書いています。そう、IEくん、君だよ君

この、古参大手シェア大なブラウザさえ無ければ、どれだけのWEBデザイナーさんの労力が軽くなる事か。新しいバージョン出す度に開発者の足を引っ張るIEくん、ほんとどうにかなりませんでしょうか。

さて、WYSIWYGエディターの話しに戻します。

そもそもWYSIWYGエディターってどういう仕組なのか

iframeってご存知でしょうか?最近は使う機会が減りましたが、iframeの中に別なページを表示出来るので、サイドバーナビゲーションなんかによく使われていたHTMLタグです。で、このiframのデザインモードをONにする事で編集出来るようになります。

デザインモードをONにする

これだけで編集する事が出来るようになります。

で、ボタンを作って押したときに下のようなコマンドを実行すると、文字を太くしたり出来ます。

このコマンドを実行する為のトリガーにbutton以外は使わない方が吉。画像とかAタグで格好良く決めたい!と思っても、IEだと別の場所をクリックしたりするだけで、選択した文字のフォーカスが外れてしまうのです(selectは大丈夫そう)

なので、ボタンを押すだけで実行出来る、太字とか斜体とか取り消し線などの処理はボタンで配置し、背景に画像なんかを指定して並べると良いと思います。

IEでフォーカスが外れる!ほんと要らないコ・・・・

さて、ボタン一発で済まない処理、例えば選択した文字にURLを指定してリンクにしたいといったケースです。これは文字を選択した後にURLを入力しようとすると、IEは選択した文字のフォーカスが外れてしまい、どこにAタグを指定すれば良いのか解らなくなってしまいます。

なので、フォーカスした位置を記憶して、処理を終えたらフォーカスを戻すって処理をする事になります。

何か操作したときにフォーカスの位置を記録する

これをリンク挿入ボタンを押したときに実装します。それぞれ、変数に代入しておきます。

マウスやキーボードの操作があれば、フォーカスを戻す

とりあえずテキストフォームに入力したり、キーボード操作をしたら記憶したフォーカスが無いかを確認し、あればフォーカスを戻す処理を実行します。

コマンド実行後などにフォーカスを削除する

処理を終えたらフォーカスしておく必要は無いので、変数を初期化します。

 

なんて事をやれば、IEさんでもいけます。Widows10でIEはSpartanという名称に変わるそうですが、レンダリングエンジンは変わらないそうです・・・バージョンアップごとにWEB屋の頭を悩ませるブラウザですので、また何か変更が有りそうで怖いですね。

とりあえず自分用の予定ですが、WYSIWYGエディターを暇なときに作ってみようかと思います。

 

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP