スタッフブログ

  • 最新配信
  • RSS

FCKeditorのカスタマイズ その1

hamaco : XOOPS » TIPS小ネタ 2009/12/13 22:11

Blogger's Avatar

hamacoです。

XOOPSを使い始めてから、FCKeditor on XOOPSというものを良く触るようになりました。
今迄こういったテキストエリアを拡張するような物を使ったことがなく分からない事も多い為、色々と勉強しながら触っています。
勉強するならついでにブログのネタにしてしまおうということで、FCKeditorのカスタマイズとかを何回かに分けて紹介してみたいと思います。

ツールバーのカスタマイズ


デフォルトのツールバーは色々と表示されていて結構ゴチャゴチャしています。
FCKeditor_default
これはXOOPS_ROOT_PATH/common/fckeditor/fckconfig.jsの97行目にある
FCKConfig.ToolbarSets["Default"] = [
	['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
	['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
	'/',
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink','Anchor'],
	['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
	'/',
	['Style','FontFormat','FontName','FontSize'],
	['TextColor','BGColor'],
	['FitWindow','ShowBlocks','-','About']		// No comma for the last row.
] ;
の部分を書き換えて変更できます。

例えば以下の様な感じに変更すると、
FCKConfig.ToolbarSets["Default"] = [
	['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	'/',
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	'/',
	['Link','Unlink','Anchor'],
	['Image','Smiley','PageBreak'],
	['TextColor','BGColor'],
] ;
こんな感じになります。
FCKeditor_ToolbarSets

スキンの選択


FCKeditorのスキンと言えば上の様な感じのを良く見ますが、
他にもデフォルトでいくつかスキンが用意されています。

これはXOOPS_ROOT_PATH/common/fckeditor/fckconfig.jsの45行目にある
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
の部分を変更することで3種類のスキンから選ぶことが出来ます。

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;
FCKeditor_office2003

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;
FCKeditor_silver

これらのスキンはCSSと画像を用意すれば好きな様にカスタマイズできるので、サイトのデザインに合わせてオリジナルのスキンを作成することも出来ます。

トラックバック

スタッフブログ最新
カテゴリ一覧

〒104-0061 東京都中央区銀座1丁目3番3号 G1ビル7階
お問い合わせ TEL 03-3524-8860

Copyright(c) 2012 RYUS.All Rights Reserved.