designModeを使わないWYSIWYGエディターの試作

MicroEngine用にWYSIWYGエディターの試作したので紹介します！

WYSIWYGエディターのDEMO

動作確認ブラウザ

この前の土曜日に、Sugamo.cssという勉強会と【優雅な】Web制作者の会の忘年会に参加してきましたー！

参加者の皆さんお疲れ様でした。主催者・幹事のみなさん、どうもありがとうございました！

今回のWYSIWYGエディターは、そのSugamo.cssでも発表したものです。

最初におことわりしておきますと、このエディターは私が開発しているmicroEngineというCMS用に試作したもので、まだ汎用的に使えませんし、まだまだまだ完成していないので、今すぐ活用できるものでもありません。

WYSIWYGエディターについて

まず、WYSIWYGとは何かというと、What You See Is What You Get の頭文字を取ったもので、見たままのものを手に入れられるということですね。 このエントリーでWYSIWYGエディターと呼んでいるものは、ブラウザでHTMLを編集するためのスクリプトということになります。

wikipediaには、CMSに関する説明も書かれていました。

近年では、コンテンツマネージメントシステムでも使われるようになり、この場合は、入力画面と出力画面が一致するよう表現する技術を指す。

Webアプリケーションで、「ワープロ感覚で編集できます」と書かれているものはこのWYSIWYGエディターだと思います。アプリケーションによっては、「書式編集」とか「リッチテキスト形式」と呼ばれていたりもします。

バッテリーIRIVER H120を変更する方法

既存のWYSIWYGエディターは結構な種類があります。いくつか、使ってみた事のあるエディターを紹介します。

http://ckeditor.com/

MicroEngineの以前のプロトタイプでは、CKEditorと呼ばれる前のFCKEditorを使っていました。

高機能なエディターですね。なんでもできそうな気がします！

http://premiumsoftware.net/cleditor/

jQueryのプラグインとして開発されていて、プラグイン部分だけだとなんと16.2KBだそうです。

ファイルサイズが小さくていいですね！

http://nicedit.com/

こちらも軽量で比較的シンプルなエディターです。

国内の有名グループウェアでも採用された実績があるので安心感がありますね！

• WMD: The Wysiwym Markdown Editor

http://wmd-editor.com/

こちらは、WYSIWYGではないのですが、面白いタイプなので紹介します。

マークダウン記法を使うエディターですが、Live previewができるのがいいですね！

WYSIWYGじゃないけど、最終的に手に入れられる見た目をリアルタイムに確認できます。

こういうアプローチもいいかもと思っています。

デモ：

なぜWYSIWYGエディターを試作したのか？

上記で紹介したWMD以外のほとんどWYSIWYGエディターは、designModeやcontentEditableというブラウザが持っている、リッチテキスト編集機能を利用しています。

詳しくはこちらを参照してください！

http://archiva.jp/web/javascript/wysiwyg.html

• リッチテキスト編集 仕様

http://www.mozilla-japan.org/editor/midas-spec.html

• CONTENTEDITABLE Attribute | contentEditable Property

http://msdn.microsoft.com/en-us/library/ms537837.aspx

どのようにPHPでは、グローバルサイトを作成する

ブラウザが元々持っている機能なので良く使われているわけですが、実は多くの問題を抱えています。

ブラウザによって改行の扱いが違ったり、生成されるhtmlもまちまちだし、IEだ�/p>

Web制作に関わる人でWYSIWYGエディターの問題に遭遇したことがある人は多いのではないでしょうか？

Sugamo.cssでこのエディターを紹介した時も、ちょうど今WYSIWYGエディターの問題にハマっているところという人もいました。

designModeを使わないWYSIWYGなエディターを作れないかいくつか案を考えてみて、そのなかで今回のエディターを試しに作ってみることにしました。

このWYSIWYGエディターはどのように動いているか？

designModeを使っていないので、簡単にワープロソフトのような操作を実現することはできません。

そこで考えたのが、カーソルサイズのテキストボックスを用意して、それをカーソルに見立ててキーボード操作に対応するというものです。

• 文字入力があると、入力された文字をカーソルの手前に置きます。IMEモードの場合は確定されるまでまって、その間文字数に応じてテキストボックスのサイズを動的に調整します。
• BackSpace(delete)キーが押されたら、カーソルの一つ前の文字を削除します。
• Enterが押されたら、BR要素を作成して、カーソルの前に置きます。
• 左右のキーが押されたら、それに合わせてカーソルを移動します。
• 上下のキーが押されたら、押下時点のカーソルの座標を元に移動します。
• 編集ボックスをクリックされたら、その位置の近いところにカーソルを移動します。

と、書きだしてみるとこんな感じなのですが、実際はブラウザ毎の違いをいろいろ吸収する必要があります。

時のブラックベリーのカーブが購入可能になります

例えば、FirefoxはIME入力開始時と確定時しかイベントが発生しません。そのため、テキストボックスを定期的に監視してサイズを調整する必要がありました。

その他にもまだまだ解決されていない課題もあります。

JSのライブラリとしては、jQueryを利用しています。

課題や未対応の事項

戻る・進むといった履歴管理をはじめ、ワープロソフトのような操作感を目指すとなるとまだまだ足りていないところはいっぱいあります。

• Firefoxでは方向キーを押しっぱなしでの移動ができません。
• 一つの文字列に複数の装飾（spanで囲む）をした場合のカーソル移動は未対応です。
• 改行を含む文字列をペーストした場合にBRに置換する処理は未対応です。
• IMEモードで半角英字を入力した場合に、未確定の文字列が書きだされる。

designModeを使わないとはいえ、クロスブラウザ対応するためには様々な課題をクリアする必要があります。

今回の試作では汎用的に動くようになっていないのですが、文字列の装飾は、Web製作者が作成したCSSの任意のclassを指定できるようにするつもりです。

このエディターを今後どうするか？

今回は、designModeに頼らないWYSIWYGエディターの可能性を探るところまではできたと思います。

まだまだ完成度は低いので追加実装が必要なのですが、MicroEngineの他の機能の実装も進めたいので、合間をみて少しずつ手を入れていきます。

来年の2月頃には、MicroEngineをリリースしたいと思うので、それまでに使い物になるかどうかですね。

designModeの課題をクリアしたとしても、エンドユーザーさんが問題なく使えないと意味がありません。

目処がつかなければ、既製のエディターを利用することになるかもしれません。

もし、このエディターが良いものになれば、MicroEngine自体は有償の製品にする計画ですが、このエディター部分だけフォークしてオープンソースにしてみても面白いかもしれませんね。

MicroEngineの開発

MicroEngine本体も開発を進めていますよ！

こちらも、既存のものとは少し違う価値を提供できるようにいろいろな試みをしています。

近いうちに、ベータテスト版を希望者に配布する準備を進めています。

もし、ベータテストに協力してもいいという方がおられましたら、このブログのコメント欄でも、Twitterのほうにでも連絡ください！