※現在では、FCKeditorの後継ライブラリである「CKeditor」が最新ライブラリとなっております。ckeditorフォルダ内の「howtouse_ckeditor_for_cmsd.txt」をご覧下さい。

■CMS Designer上でのFCKeditorの使い方

CMS Designer上でFCKeditorを利用することができます。
FCKeditorは、HTMLのフォーム要素をリッチなHTMLエディタに変えることができるオープンソースのJavascriptライブラリで、FCKeditorのライセンス条項の範囲内の利用であれば無料で利用することができます。Frederico Caldeira Knabben氏によって http://www.fckeditor.net/ で開発・配布されています。FCKeditorのライセンス条項についてはFCKeditorのサイト（英語）を必ずご覧頂き、そのライセンス条項に従って利用して下さい。

CMS DesignerはFCKeditor本体を同梱していませんので、FCKeditorのサイトより最新版を取得して組み込む必要があります。組み込みは簡単で、ダウンロードしたzipファイルをfkceditorフォルダ内に展開し、fckconfig.jsに一部追記するだけです。

■組み込み手順

(1) 下記サイトよりFCKeditorの最新版をダウンロードして下さい。
　http://www.fckeditor.net/download
　
　このファイルを執筆している時点では、FCKeditor 2.6.3が最新となっています。

(2) ダウンロードしたzip又はtar.gzファイルを展開し、

　/cmsdesigner/fckeditor/
　
　の中にコピーして下さい（今お読みのこのテキストファイルがあるフォルダです）。
　この際、fckeditor.jsがフォルダ内に既に存在しますが、これはダミーのファイルですので上書きして下さい。
　
(3) fckconfig.jsファイルをエディタで開いて、下記の場所に追記して下さい。

FCKConfig.ToolbarSets["Basic"] = [
	['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

↑上記の場所の下に、以下↓↓を追加して下さい。

// ---- CMS Designer settings start ----
FCKConfig.ToolbarSets["CMSD_Full"] = [
	['Source'],
	['Cut','Copy','Paste','PasteText','PasteWord'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	'/',
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink','Anchor'],
	['Table','Rule','Smiley'],
	'/',
	['FontFormat','FontSize'],
	['TextColor','BGColor'],
	['FitWindow','ShowBlocks'] // No comma for the last row.
];

FCKConfig.ToolbarSets["CMSD_Simple"] = [
	['Bold','Italic','Underline'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink'],
	['Undo','Redo'],
	'/',
	['FontSize','TextColor'],
	['Source']
];

FCKConfig.ToolbarSets["CMSD_Normal"] = [
	['Bold','Italic','Underline'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink'],
	['Undo','Redo'],
	['Table','Smiley'],
	'/',
	['FontSize','TextColor','BGColor'],
	['Source','FitWindow']
];

// "CMSD_Normal", "CMSD_Simple", or "CMSD_Full"
FCKConfig.ToolbarSets["CMSD"] = FCKConfig.ToolbarSets["CMSD_Normal"];

// ---- CMS Designer setting end ----

　↑↑ここまでです。

　上記のソースは、FCKeditorの「ツールバー」の内容を定義しています。
　
　一番最後の行、

// "CMSD_Normal", "CMSD_Simple", or "CMSD_Full"
FCKConfig.ToolbarSets["CMSD"] = FCKConfig.ToolbarSets["CMSD_Normal"];

　の部分を、

// "CMSD_Normal", "CMSD_Simple", or "CMSD_Full"
FCKConfig.ToolbarSets["CMSD"] = FCKConfig.ToolbarSets["CMSD_Full"];

　や、

// "CMSD_Normal", "CMSD_Simple", or "CMSD_Full"
FCKConfig.ToolbarSets["CMSD"] = FCKConfig.ToolbarSets["CMSD_Simple"];

　にすることで、ツールバーをよりシンプルにしたり、多機能にしたりすることができます。
　これらの設定（CMSD_Normal,CMSD_Full,CMSD_Simple）は、アル・デザインワークス側で取捨選択したものですが、必要に応じてカスタマイズして頂いて構いません。FCKeditorのサイトの説明（英語）を読んで、ご自分で不要なボタン等を消したり追加したりできます。但し、CMS Designerとの相性上、他に追加して意味のあるボタンはほとんどありません（「Templates」機能については、設定が面倒ですが、やる気のある人にはお勧めです。詳しくはFCKeditorのサイトをご覧下さい）。

　fckconfig.jsを編集してアップロードしても、ブラウザのキャッシュに古いものが残ったままになっておりますので、その都度、ブラウザのキャッシュを削除するようにして下さい。


(4) 以上で準備は完了です。
　これで、textarea項目でFCKeditorを利用することができます。
　FCKeditorは全てのtextarea項目に適用されるのではなく、output属性が"html1"のもののみに対して自動的にFCKeditorを適用します。
　
　リッチエディタを適用したいtextarea項目に対して、output属性を"html1"にして下さい。

　尚、これまで"html2"だった項目を"html1"に変更すると、自動改行されていたものが改行されなくなりますので、既存データを手作業で改行していく必要があります。一度改行を入れてしまうと、後で"html2"に戻した際に二重に改行されることになりますので、既存の項目を"html1"に変更する際にはご注意下さい。

■トラブル時の対策
(1) html1にしたが、何も変化がない。
→fckeditorをアップロードしているにも関わらず、変化がない場合、ブラウザのキャッシュにダミーのfckeditor.jsが残っている可能性があります。ブラウザのキャッシュをクリアしてから再度お試し下さい。
→キャッシュをクリアしても変化がない場合、fckeditorのコピー先が間違っている可能性があります。組み込み手順を再度ご確認頂き、正しく「/cmsdesigner/fckeditor」フォルダ内にコピーされているかご確認下さい。

(2) 「FCKConfig.ToolbarSets["CMSD"]が定義されていません」というエラーが出る。
→組み込み手順の(3)が行われていないか、もしくはアップロードされていないか、又はブラウザのキャッシュに古いfckconfig.jsが残っている可能性があります。追記もアップロードも行っている場合にはブラウザのキャッシュをクリアしてから再度お試し下さい。

2008年11月18日 アル・デザインワークス