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. Contact Form 7だけで、reCAPTCHA v3のロゴを表…

  2. 流れている音楽の曲名を知りたいとき

  3. AmebaからFacebookへ、連携方法の変更

  4. XML Sitemap Generator for WordPress…

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

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

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

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

PAGE TOP