簡易WYSIWYGエディタを作る

/web/javascript

Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

Javascriptを使ったWYSIWYGエディタと言えば、openWYSIWYGという立派なものが既に公開されているわけで、実際利用するにもこれを弄ったほうが使えそうなのですが、カスタムするにも周辺知識は必要だろう、ということで作ってみました。

動作確認はサンプルにて。おおかまかな手順は、以下。

  1. iframeを生成する （textareaを隠す）
  2. iframeのdesignModeをonにする （文書を編集可能にする）
  3. iframeにイベントを付与する （編集内容をtextareaに反映する）

提供される機能としては、こんな感じです。

  1. execCommand()で各種効果を実装する
  2. WYSIWYGモードとソース表示を切り替える
  3. 任意の場所に指定したHTMLタグを挿入
  4. 選択領域を指定したHTMLタグで囲む

オリジナルのopenWYSIWYGから機能を抜き出しながら、とりあえず形だけそれっぽくしてみた感じです。感想としては、Rangeオブジェクトの操作というより designMode の実装機能にかなり頼っている感覚です。

たとえば太字や斜体なんかは<span>とstyle属性が使われてたりと、強引な部分も多々ある。とはいえ本質的には、（文字列としてではない）HTMLタグを埋め込んだりテキストをその場で編集したり画像をちょちょいと弄ったり、といった他に類を見ない機能は魅力的なので、.execCommand()関係を削ってRangeと併用する方向でのカスタムが面白そうです。

designMode属性

  1. doc.body.contentEditable = true;
  2. doc.designMode = "on";

designMode属性およびcontentEditable属性は、「指定の場所を編集可能な状態」にする機能。designMode属性はiframe専用の属性だけど、IEではbodyやdivに対しても指定できる。contentEditable属性はIEの拡張ですが、こちらは1.2以降のSafariでも動きます。designModeおよびcontentEditableに関しては、以下のリンク先が詳しい。

これを利用すれば、普通のサイトをWYSIWYG操作できるBookmarkletもできます。

» ドキュメントを編集する

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。