今日も、FCKeditor を少々いじりました。FCKeditor、本当によくできていますね。まずは、設定環境ですが、前回と同じです。
設置環境：
- /samples/ajax/editor/editor.php — サンプルコード(エディタ)
- /samples/ajax/editor/FCKeditor/ — FCKeditor設置ディレクトリ
設定は、前回の続きなので、初めの方は、「FCKeditorをPHPから使って見た」を 参照して下さい。
今回は、３つの設定を：
- 独自の環境ファイル(myconfig.js)
- ツールバーのカスタマイズ
- ダーティチェック
独自の環境ファイル
editor.php ：
$oFCKeditor = new FCKeditor(’FCKeditor1′) ;
$oFCKeditor->Config[’CustomConfigurationsPath’]
= ‘/samples/ajax/editor/myconfig.js’ ;
独自の環境設定ファイル（上例ではmyconfig.js）は、オリジナルの設定ファイル（FCKeditor/fckconfig.js）を上書きします。独自の環境設定ファイルを望みの場所に作る事ができます。例えば、ログインユーザ毎に環境設定ファイルを変えたりできます。
ツールバーのカスタマイズ
上で設定した独自の環境設定ファイル（myconfig.js）を使ってツールバーをカスタマイズしてみます。
myconfig.js：
FCKConfig.ToolbarSets[”MyToolbar”] =
[
[’Save’,'NewPage’,'Preview’],
[’Cut’,'Copy’,'Paste’,'PasteText’,'PasteWord’,
’-',’Undo’,'Redo’],
[’Bold’,'Italic’,'Underline’,'StrikeThrough’],
[’OrderedList’,'UnorderedList’,
’-',’Outdent’,'Indent’],
‘/’,
[’Link’,'Unlink’],
[’Table’,'Image’,'Rule’,'SpecialChar’,'PageBreak’],
[’FontSize’,'TextColor’,'BGColor’],
[’FitWindow’,'Source’,'-’,'About’]
] ;
editor.php ：
$oFCKeditor = new FCKeditor(’FCKeditor1′) ;
$oFCKeditor->Config[’CustomConfigurationsPath’] = ‘/samples/ajax/editor/myconfig.js’ ;
・・・・・
$oFCKeditor->ToolbarSet = ‘MyToolbar’;
$oFCKeditor->Create() ;
出来上がったツールバーはこんな感じ：
ダーティチェック
「ダーディチェック」検索してもありません。今、私が作った言葉です。ブラウザで入力している最中に誤ってページを変えて「あー」「おーＮＯ」と思った人は多いと思います。普通のアプリ（ワープロなど）は、「閉じる前に、保存しますか？」と丁寧に聞いてくれます。Webソフトではあまりこの「ダーディチェック」をしません。でも、クライアントの機能がリッチになればなるぼど、「ダーディチェック」の必要性は増していきます。
「ダーディチェック」とは開いたテキスト（または新規のテキスト）を変更したか、（汚したか）をチェックし、汚れていれば、「ページを移動してよいか」を聞き、ページの移動を抑止できるようにする機能のことです。と今、定義します。
さて、「ダーディチェック」はJavaScriptの onbeforeunload イベントを使います。これは、WPと同じ方法です。onbeforeunload で文字列を return するとブラウザはその文字列を表示し、「ページ」を移ってよいかの確認ダイアログがでます。
editor.php ：
html ヘッダー に以下を書きます。
<script type=”text/javascript”>
<!–
var objEditor;
function BeforeUnLoadHandler()
{
if(objEditor && objEditor.IsDirty()){
return “ページが変更されています。”;
}
}
function FCKeditor_OnComplete( editorInstance )
{
objEditor = FCKeditorAPI.GetInstance(’FCKeditor1′);
window.onbeforeunload = BeforeUnLoadHandler;
}
// –>
</script>
- FCKeditor_OnCompleteイベント はFCKeditorが完全にロードされた場合に発生します。イベントの設定はFCKeditorオブジェクトがしてくれるので、FCKeditor_OnComplete を書くだけでようです。
- FCKeditor_OnCompleteの中で、FCKeditorのインスタンスの取得と onbeforeunload の設定を行います。両者共、このタイミングが一番良いと思います。
- onbeforeunload イベント発生時(BeforeUnLoadHandler)に、IsDirty()メソッドを使って、HTMLテキストが変更されていれば、「ページの移動」をユーザに確認させます。
FCKeditorのJavaScript APIについては以下を参照して下さい。
終わりに
３回に渡って、FCKeditorを紹介しました。これはすごいパーツです。是非、PHPに導入して下さい。ここで、紹介し切れなかった内容は：
また、Smartyとの連動も興味深いです。
