Xoopsでfckエディターのカスタマイズ

Xoopsでコンテンツを作成、編集する際にFCKEditorを使っている人も多いであろう。
しかし、デフォルトのままではスタイルシートがサイトで使っているものと違い、ばかでかい文字で表示されたりして、編集時のイメージと完成時のイメージが異なってしまう。まぁ、それを加味した上で編集をされていることと思うが、できることなら同じイメージで作成したい。
なので、このエディターの最低限のカスタマイズをメモっておく。

編集ファイル

/commons/fckeditor/fckconfig.js

編集箇所

1)CSSの適用

CSSを自分のテーマのものにしてしまう。

30行目付近

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + ‘css/fck_editorarea.css’ ;

これを

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + ‘../../../themes/<自分のテーマ>/style.css’ ;

に書き換える

2)CSSの微調整

次に自分のテーマのCSSではBODYタグの記述に「margin:0; padding:0」としている人もいると思う。その場合、エディタの編集テキストボックスないでは見栄えが良くないので、以下の記述に強制的に追加してしまう。

FCKConfig.EditorAreaStyles = ” ;

これを例えば、

FCKConfig.EditorAreaStyles = ‘body{padding: 10px; margin: 0px; font-size: 80%;}’ ;

私の場合は、フォントサイズも変更していたので、それも同じように合わせた。

3)ツールバーをすっきりさせる

ツールバーには、普段使わない機能までがいっぱいあり、すこし邪魔くさいので使いそうなものだけにしてすっきりさせる。

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’]
] ;

こんなことをしておくだけでも使いやすくなるかと思う。

中小企業診断士 山口亨
UTAGE経営研究所

関連記事

  1. Google Analyticsのサイト内検索で文字化け

  2. アマゾンランキングのテスト3

  3. IS06シリウスアルファで初めてびっくりな現象に遭遇しました

  4. GoogleウェブマスターツールからHTMLの重複についての改善

  5. EasyWineの解像度が低く、ウィンドウがでかい

  6. 気持ちを新たにアメブロを再度開始

  7. さくらインターネットの共有SSLde問い合わせモジュールだけSSL化

  8. IS06 Siriusα の利用レポート

PAGE TOP