Webベースの WYSIWYG エディタ SPAW

今日は、Webベース WYSIWYG エディタの一つである、SPAWというのを試してみた。

SPAW は、GPL で配布される PHP アプリケーションに組み込むことが出来る。エディタ部分は JavaScript で記述されており、Webブラウザ上で動作する。但し、動作可能な Webブラウザは Microsoft Internet Explorer 5.5 以上のみに限定される。

SPAW は、見た目がきれいなので、私は一目見て直ぐに気に入ってしまった。しかし気に入ったのはそれだけではない。かなり細かいところまでこだわって作られており、非常に使いやすい。CSSへの対応もしっかりしている(テキストを選択し、スタイルプルダウンメニューでスタイルを選択すると、そのテキストに class 属性を付けてくれるのだ。前もってスタイルシートには、その class の見栄えを指定しておく。)

また、カスタマイズも自由に出来るようになっている。先ほど紹介したスタイルや、段落などのブロック要素(p, h1, h2, pre等)、イメージ選択ダイアログ、Internal Link ダイアログ(これは自分で作成する必要があるのだが。)などを、自分のアプリケーションに合わせたカスタマイズが可能だ。また、多言語にも対応しており、きちんと日本語のメッセージファイルが準備されていた。(但し、少し古かったが。)

インストール

1. ダウンロードのページより、ファイルをダウンロードする。
2. Webサーバのドキュメントルートにダウンロードしたファイルを展開する。
3. spaw/config/spaw_control.default.config.php を spaw/config/spaw_control.config.php にコピー。自分の環境に合わせて書き換える。

   img データの置き場であるが、そのスクリプトからの相対パスにしないと上手くいかなかった。今現在、以下の設定で上手く動いている。

   // image libraries
   $spaw_imglibs = array(
     array(
       'value'   => 'image/drink/',
       'text'    => '飲み物',
     ),
     array(
           'value'   => 'image/food/',
           'text'    => '食べ物',
     ),
   );
   

4. 英語以外の場合に 見出しタグや段落タグの切り替えが上手く動かないので、パッチ をあてる。
5. spaw/scripts/ にある、demo.php, demo_red.css ファイルを、ドキュメントルートにコピーする。この demo.php が上手く動けば、インストールは OK である。

Internal Link ダイアログ

そのサイト内のリンクをドキュメントに書きたいとき、前もってDBなどに登録されているものをダイアログで選択すれば便利だろう。

今日はそこまでは出来なかったのだが、Internal Link ダイアログの雛型というか、実験用のスクリプトを書いてみた。[OK]ボタンをクリックすると、この BLOG へのリンクが貼り付けられるというものだ。