Xoopsでコンテンツを作成、編集する際にFCKEditorを使っている人も多いであろう。
しかし、デフォルトのままではスタイルシートがサイトで使っているものと違い、ばかでかい文字で表示されたりして、編集時のイメージと完成時のイメージが異なってしまう。まぁ、それを加味した上で編集をされていることと思うが、できることなら同じイメージで作成したい。
なので、このエディターの最低限のカスタマイズをメモっておく。
編集ファイル
/commons/fckeditor/fckconfig.js
編集箇所
１）CSSの適用
CSSを自分のテーマのものにしてしまう。
30行目付近
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + ‘css/fck_editorarea.css’ ;
これを
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + ‘../../../themes/<自分のテーマ>/style.css’ ;
に書き換える
２）CSSの微調整
次に自分のテーマのCSSではBODYタグの記述に「margin:0; padding:0」としている人もいると思う。その場合、エディタの編集テキストボックスないでは見栄えが良くないので、以下の記述に強制的に追加してしまう。
FCKConfig.EditorAreaStyles = ” ;
これを例えば、
FCKConfig.EditorAreaStyles = ‘body{padding: 10px; margin: 0px; font-size: 80%;}’ ;
私の場合は、フォントサイズも変更していたので、それも同じように合わせた。
３）ツールバーをすっきりさせる
ツールバーには、普段使わない機能までがいっぱいあり、すこし邪魔くさいので使いそうなものだけにしてすっきりさせる。
100行目あたりの以下の記述を
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”] = [
[‘Source’,’DocProps’,’-‘,’Save’,’Preview’,’Templates’],
[‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteWord’],
[‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’],
‘/’,
[‘Bold’,’Italic’,’Underline’,’StrikeThrough’],
[‘OrderedList’,’UnorderedList’,’-‘,’Outdent’,’Indent’],
[‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
[‘Link’,’Unlink’,’Anchor’],
[‘Image’,’Table’,’Rule’,’Smiley’,’SpecialChar’],
‘/’,
[‘Style’,’FontFormat’,’FontSize’],
[‘TextColor’,’BGColor’],
[‘About’]
] ;
こんなことをしておくだけでも使いやすくなるかと思う。
