WYSIWYGな編集をしよう

WYSIWYGな編集をしよう †

「WYSIWYGエディタを使おう」みたいな方がそれっぽい?

WYSIWYGなエディタって何? †

WYSIWYGはwikipedia*1によると「コンピューター（画面）で見えるものがそのまま印刷できる」というようなことを表します．それが最近ではHTMLなどをビジュアル的に編集することをWYSIWYG編集ということがあるようです．

今回はHTMLフォームの一つ，TEXTAREAをHTML書式でWYSIWYG化する方法を紹介します．

WYSIWYGなエディタって何があるの? †

TEXTAREAのWYSIWYG化は一番手っ取り早いのはそういうコンポーネント（ライブラリ）を使うことです．基本的な仕組みはDHTML（Dynamic HTML）になるようで，コアになる部分はすべてJavaScriptで実装されています．

TEXTAREAのWYSIWYG化には有名なものは下記のものがあります．

SPAW EDITOR: SPAW EDITORは2003年ごろに出てきたもののようで，XOOPSのモジュールで使用されたことで有名になりました． SPAW EDITORはInternet Explorer専用のようです．
HTMLAREA: HTMLAREAは2002年ごろに出てきたもののようで，HTMLAREAはバージョン3.0からInternet Explorerとmozillaで動作するようです． HTMLAREAの特徴の一つにエディタ部分を別ウィンドウに切り離すことができます．日本語化はほぼできているようですが，執筆時現在一部日本語化の遅れで動作不良が起こっているようです． HTMLAREAは比較的広くウェブアプリケーションで採用されているようです．
FCKEditor: FCKEditorは2003年ごろに出てきたもののようで，比較的多機能なWYSIWYGのようです．執筆時現在2.0RC2がリリースされていますが，これには日本語化ファイルが含まれて居ません． FCKEditorの特徴は必要に応じてツールバーの量を増減できるところです．

前述の通り，それぞれJavaScriptで実装されているため，ウェブアプリケーションを実装している言語にとらわれず，広く利用することができます．

FCKEditorを使ってみる †

それではFCKEditorを使ってみます．

FCKEditorを取得する †

FCKEditorの公式サイトは http://www.fckeditor.net/ です．ダウンロードは公式サイトの Download から行うことができます．執筆時点では2.0RC3が最新版でしたので，このバージョンのFCKeditor_2.0rc3.tar.gzをダウンロードします．

FCKEditorをインストールする †

FCKEditorのアーカイブをダウンロードしたらtarコマンドで展開します． FCKEditorは前述の通りJava Scriptが基本になっていますので，ウェブブラウザからアクセスできるところになければいけません．今回はサンプルを作成するディレクトリにfckeditorというディレクトリを作成し，そのディレクトリ上ででアーカイブを展開しました．

インストール作業例

$ mkdir fckeditor
$ cd fckeditor
$ tar zxvf ../FCKeditor_2.0rc3.tar.gz

アーカイブの展開ログ

fckeditor-untar.log

これでインストール作業は完了です．

とりあえず表示してみる †

FCKEditorを使用するには最低限下記のコードで実現できます．

FCKEditorを使用する最低限のコード

$fckObject = new FCKeditor( "edit_name") ;
$fckObject->BasePath = "/path/to/fckeditor/;
$fckObject->Create();

これだけでFCKEditorが表示されます． FCKEditorをsubmitすると，次のページではオブジェクトのインスタンス時の第一引数の名前でフォーム値として取得することができます．

submitされた値の表示例

<html>
 <head></head>
<body>
<?php echo $_REQUEST[ "edit_name"]; ?>
</body></html>

FCKeditorの仕組みを知る †

FCKEditorは最終的にはIFRAMEで作成されたDynamic HTML(Java Script)の塊で，すべての動作はウェブブラウザ上で処理されます．例えばPHPなどの言語を使用せずとも，Java Scriptのみが書かれたHTMLでFCKEditorを使用することもできます．それではPHPは何をしているのか? というと，Java Scriptに対しての初期設定を行ってるだけに過ぎません．

FCKEditorクラスを見てみよう †

FCKEditorはfckeditor.phpというファイルで記述されています．これは非常に小さなスクリプトで，読めばおおむね何をしているか推測することができます．

FCKEditorクラスは下記のメソッドとプロパティを持ちます．

FCKEditorクラスのメソッド

メソッド名	用途
FCKeditor	コンストラクタ
Create	FCKEditorを実行するHTMLを出力する
CreateHtml	FCKEditorを実行するHTMLを返す
IsCompatible	FCKEditorが使用できるかどうか調べる
GetConfigFieldString	ConfigプロパティをFCKEditorに渡すパラメータ文字列に変換する（private的関数）

FCKEditorクラスのプロパティ

プロパティ名	用途
$InstanceName	インスタンスするフォーム要素名を指定する
$BasicPath	FCKEditor本体のURLパスを指定する
$Width	表示するFCKEditorの幅をピクセル単位で指定する
$Height	表示するFCKEditorの高さをピクセル単位で指定する
$ToolbarSet	使用するツールバーの種類を指定する．デフォルトでは「default」と「Basic」がある
$Value	FCKEditorのデフォルト文字列
$Config	その他のFCKEditorの設定を配列で指定

これらの値はFCKEditorが実行されたとき，「<fckeditor>/editor」ディレクトリの「fckconfig.js」のデフォルト値を上書きするようになります．どういう値が存在するかはその「fckconfig.js」を見ればおおむね理解することができるでしょう．

それではこれから少しだけFCKEditorのカスタマイズ例を紹介します．

ツールバーを切り替える †

ツールバーはToolBar()メソッドで切り替えます．ツールバーの種類は下記の2種類あります．

ツールバーの種類

default	すべてのツールバーが使用できる
Basic	いくつかのツールバーが使用できる

ツールバーを切り替える例

$fckObject->ToolBar( "Basic");

Defaultツールバー

Basicツールバー

選択できるフォントを設定する †

FCKEditorは海外製ソフトウェアにありがちな，デフォルトでは英語フォントしか選択できません．これを日本語フォントを選択できるようにしてみましょう．フォントの指定はConfigプロパティに配列で連想名「FontNames」にセミコロン（;）区切りで指定します．

フォントの指定例

$fckObject->Config = array( "FontNames"=>"ＭＳ Ｐゴシック;ＭＳ ゴシック;Osaka");

その他のカスタマイズ †

前述どおりすべてのデフォルト値は「<fckeditor>/fckconfig.js」で指定されています．これらをConfigプロパティで上書きすることで幅広いカスタマイズを行うことができます．

ただし，スタイルメニューの内容は「<fckeditor>/fckstyles.xml」を変更をします．

FCKEditorで簡易アプリを作ってみる †

FCKEditorを使用したサンプルとしてニュースリリースページを作成してみます．なお，スクリプトや保存データの文字コードにはUTF-8を，リリース情報の保存にはMySQLを使用しました．

データベースの作成 †

今回データベースに下記の項目を持つテーブルを作成します．

ニュース用テーブル

カラム名	用途
id	ニュースID
date	リリース日時
subject	リリース名（件名）
body	リリース情報（本文）

SQLにするとこのようになります．

ニュースリリース用テーブル作成SQL

mysql.sql

PHPスクリプトは4つ作成します．

共通部分（common.php）
リリース情報表示（release_list.php）
リリース情報編集（release_edit.php）
リリース情報保存（release_save.php）

特に細かいエラー処理は含んでいませんので注意してください．

共通部分の作成 †

共通部分は今回は特に大きな実装は必要なく，データベースの初期化のみ行います．

共通部分

common.php

リリース情報表示 †

一般的なデータベース内容の表示とまったく変わりありません．今回はテンプレートなどまったく使用していませんが，実際の構築にはそういったものを用いた方がいいでしょう．

リリース情報一覧画面

release_list.php

また，単に一覧を出しただけでは面白くないので，URLに「id=番号」を指定することで，指定の記事を1つだけ表示する機能も追加しています．

リリース情報追加 †

ここでFCKEditorの登場です．といってもFCKEditor自体非常に簡単に使用できてしまうので，たいしたことはしていません．

今回はあえて代表的な日本語フォントを指定できるようにしています．

リリース情報追加処理

release_edit.php

リリース情報追加画面

なお，この記事の本来の目的ではないので，題名の空文字チェックなどはまったくやっていません．

リリース情報保存 †

リリース情報の保存です．基本的には一般的な処理となんら変わる事がありません． FCKEditorでの編集内容はFCKEditorのインスタンス時に第1引数で指定した名前でHTMLテキストが送信されるので，それを単純に保存するだけです．

リリース情報保存処理

http://elf.no-ip.org/php/examples/fckeditor/release_edit.phps

完成してしまいました †

これで最低限の実装は終了です． FCKEditorはブラウザ上の見た目が豪華なだけで送信されるデータはTEXTAREAのそれとまったく変わりないので，今までプログラミングをしてきた人にはどうしようもないくらい簡単に使えてしまいます．

リリース情報表示画面

WYSIWYGエディタの落とし穴 †

WYSIWYGエディタは誰でも簡単にリッチテキストを作成することができる活気的な仕組みです．しかし，タグを自由に使用することができるため，セキュリティホールへの危険性が非常に高くなります．よって使用する場所は例えば管理画面のみでの使用など，よく検討する必要があるでしょう．

終わり †

執筆時点でなかなか正しく動作するWYSIWYGエディタがなく，開発の方に相談をしたりしながらの執筆になりました．今回紹介したWYSIWYGエディタはSPAW EDITORを除き，まだまだバージョンアップが行われているのでドキュメントやソースコードを追いかけながらの利用になるかもしれません．

しかしそういう面倒な面はオープンソースの楽しさでもあります．是非みなさまもWYSIWYGエディタのハックを楽しんでください;-)

/

http://wiki.poyo.jp/read/Writing/kiwameru_php_vol.1/wysiwyg-editor

メインコンテンツ

サブコンテンツ1

サブコンテンツ2

日記

スケジュール

他サイト

システム

アクセス状況

wiki更新情報

最新の5件

blog更新情報

HotPHPPER News