FCKeditorをBCOOL THEMEに最適化して使う方法

カスタマイズ＆運用TIPS : FCKeditorをBCOOL THEMEに最適化して使う方法

投稿者 : taka 投稿日時： 2007-10-16

FCKeditorをBCOOL THEMEに最適化して使う方法 XOOPS上での最近のコンテンツ編集の主流は、GIJOEさんのPICO+FCKeditorの様です。先日のバージョンアップによって添付画像のリサイズが追加されましたね。これによってさらにFCKeditorへの乗り換えに拍車がかかりそうです。このサイトにも度々質問をいただく事があり、そろそろ軽視できない状況なので、ここでBCOOL THEMEを使用したサイトでFCKeditorを最適化する方法についてご紹介したいと思います。

XOOPSを使ってサイト構築をされている方は、その導入の簡単さ故にか、モジュール等についても同梱されたファイルの中身に記載された注意書きなどを読まない人が多かったり^^;、とりあえず使えればいいからと標準状態のまま使っている人が多いようです。FCKeditorはいわゆるモジュールでもなく、管理画面などがありませんから、もきちんと自分のサイトに合わせた設定をせずに使っている方がほとんどの様です。ほんの少しの努力でとても使いやすいものになりますので、是非設定しておきたいものです。私がFCKeditorを導入する際は、以下の設定を行っています。

編集画面レイアウトの変更(picoのtemplate編集)
サイトで使うスタイルシートの適応
プルダウンのスタイルのカスタマイズ
挿入テンプレートのカスタマイズ
メニューのシンプル化など...

今回はBCOOL THEMEのex.cssの使い方と共に紹介していきます。

編集画面レイアウトの変更(picoのtemplate編集)

幅固定のテーマが多いBCOOL THEMEでは「編集領域の確保」が重要です。編集時も表示時となるべく同じ幅で行わないと、せっかくのヴィジュアライズされたHTMLエディタの機能を活かせているとはいえないでしょう。そこでpico標準の編集画面テンプレート（pico_main_content_form.html）を編集します。手を入れるのは、74行目付近

		<tr valign="top" align="left">
			<th class="head"><label for="body"><{$smarty.const._MD_PICO_TH_BODY}></label></th>
			<td class="even">
				<{if $body_wysiwyg}>
					<{$body_wysiwyg}>
				<{else}>
					<input type="checkbox" id="body_bbcode_onoff" onclick="if(this.checked){xoopsGetElementById('body_bbcode_buttons_pre').style.display='block';xoopsGetElementById('body_bbcode_buttons_post').style.display='block'}else{xoopsGetElementById('body_bbcode_buttons_pre').style.display='none';xoopsGetElementById('body_bbcode_buttons_post').style.display='none'};" /><label for="body_bbcode_onoff"><{$smarty.const._MD_PICO_LABEL_INPUTHELPER}></label>
					<br />
					<{xoopsdhtmltarea name="body" cols="60" rows="15" value=$content.body pre_style="display:none;" post_style="display:none;"}>
				<{/if}>
			</td>
		</tr>

の部分です。テーブルが2列になっているので、1行にしてしまいます。

<tr valign="top" align="left">
	<th colspan="2" class="head"><label for="body"><{$smarty.const._MD_PICO_TH_BODY}></label>
	<{if $body_wysiwyg}>
		<{$body_wysiwyg}>
		<{else}>
		<input type="checkbox" id="body_bbcode_onoff" onclick="if(this.checked){xoopsGetElementById('body_bbcode_buttons_pre').style.display='block';xoopsGetElementById('body_bbcode_buttons_post').style.display='block'}else{xoopsGetElementById('body_bbcode_buttons_pre').style.display='none';xoopsGetElementById('body_bbcode_buttons_post').style.display='none'};" />					<label for="body_bbcode_onoff"><{$smarty.const._MD_PICO_LABEL_INPUTHELPER}></label>
		<br />
		<{xoopsdhtmltarea name="body" cols="60" rows="15" value=$content.body pre_style="display:none;" post_style="display:none;"}>
	<{/if}>
	</th>
</tr>

サイトで使うスタイルシートの適応

せっかくリアルタイムにヴィジュアライズされるエディティング画面なのですから、実際に掲載される画面と同様なプレビューが出来るようにしておかねば意味がありませんよね。 fckeditor.jsの27行目付近にある

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;

を自分の使っているテーマのスタイルシートに変更することで、編集中のエディタエリア内の見た目も、サイトのスタイルが反映されます。サンプル

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + '../../../themes/使用テーマ名/style.css'

プルダウンのスタイルのカスタマイズ

BCOOL THEME 2ndシリーズにはHTMLコンテンツ制作を支援するためのスタイルをあらかじめ同梱しています。配布テーマのcssフォルダに入れてある“ex.css”がそれなのですが、これまで丁寧な説明をしていなかったためか、以外とうまく使われていないのかもしれません。ただこの“ex.css”に記載したスタイルは、HTML編集をする際、どれも頻繁に使いたいと思うものなはずなので、とても重宝するはずです。

ここをクリックしてそのスタイルサンプルを見る

このex.cssをFCKeditorでも瞬時に適応させるため、デフォルトで用意されているスタイルをex.cssで置き換えてしまいます。 fckstyles.xmlの22行目～

<Styles>
	<Style name="Image on Left" element="img">
		<Attribute name="style" value="padding: 5px; margin-right: 5px" />
		<Attribute name="border" value="2" />
		<Attribute name="align" value="left" />
	</Style>
	<Style name="Image on Right" element="img">
		<Attribute name="style" value="padding: 5px; margin-left: 5px" />
		<Attribute name="border" value="2" />
		<Attribute name="align" value="right" />
	</Style>
	<Style name="Custom Bold" element="span">
		<Attribute name="style" value="font-weight: bold;" />
	</Style>
	<Style name="Custom Italic" element="em" />
	<Style name="Title" element="span">
		<Attribute name="class" value="Title" />
	</Style>
	<Style name="Code" element="span">
		<Attribute name="class" value="Code" />
	</Style>
	<Style name="Title H3" element="h3" />
	<Style name="Custom Ruler" element="hr">
		<Attribute name="size" value="1" />
		<Attribute name="color" value="#ff0000" />
	</Style>
</Styles>

を

<Styles>

	<Style name="写真をフォトフレーム風に" element="img">
		<Attribute name="class" value="photo_frame" />
	</Style>

	<Style name="写真フレーム(左回込)" element="img">
		<Attribute name="class" value="photo_r" />
	</Style>

	<Style name="写真フレーム(右回込)" element="img">
		<Attribute name="class" value="photo_l" />
	</Style>

	<Style name="vertical align middle for images" element="img">
		<Attribute name="class" value="vam" />
	</Style>

	<Style name="small" element="span">
		<Attribute name="class" value="small" />
	</Style>

	<Style name="noteline" element="span">
		<Attribute name="class" value="noteline" />
	</Style>

	<Style name="notice" element="span">
		<Attribute name="class" value="notice" />
	</Style>

	<Style name="marker" element="span">
		<Attribute name="class" value="marker" />
	</Style>

	<Style name="price" element="span">
		<Attribute name="class" value="price" />
	</Style>

	<Style name="センタリング" element="div">
		<Attribute name="class" value="center" />
	</Style>

	<Style name="右揃え" element="div">
		<Attribute name="class" value="right" />
	</Style>

	<Style name="左揃え" element="div">
		<Attribute name="class" value="left" />
	</Style>

	<Style name="clear" element="div">
		<Attribute name="class" value="clear" />
	</Style>

	<Style name="topic box" element="div">
		<Attribute name="class" value="topicbox" />
	</Style>

	<Style name="topic box1" element="div">
		<Attribute name="class" value="box1" />
	</Style>

	<Style name="topic box2" element="div">
		<Attribute name="class" value="box2" />
	</Style>

	<Style name="回込み解除" element="div">
		<Attribute name="class" value="clear" />
	</Style>

</Styles>

に変更します。このように、もし自分で頻繁に使いたいようなスタイルがある場合は、テーマのex.cssにクラス宣言を追加し、fckstyles.xmlにそのクラスを呼び出す記述を加えていく事で、より充実した環境をつくることが出来ます。

挿入テンプレートのカスタマイズ

意外と最も便利と個人的に思うのが、挿入テンプレートのカスタマイズです。とにかくいちいち記述するのが面倒なレイアウト系のものはテンプレートにしてしまうと日々の作業を楽にしてくれます。やり方は先ほどのスタイルとほとんど同じで、fcktemplates.xmlを自分専用にカスタマイズするだけです（ヴィジュアルアイコンも変更したい場合は、こちらも用意する必要がありますが）。ここでは私のよく使う設定をご紹介します。 fcktemplates.xmlの22行目～

<Templates imagesBasePath="fck_template/images/">
	<Template title="Image and Title" image="template1.gif">
		<Description>One main image with a title and text that surround the image.</Description>
		<Html>
			<![CDATA[
				<img style="MARGIN-RIGHT: 10px" height="100" alt="" width="100" align="left"/>
				<h3>Type the title here</h3>
				Type the text here
			]]>
		</Html>
	</Template>
	<Template title="Strange Template" image="template2.gif">
		<Description>A template that defines two colums, each one with a title, and some text.</Description>
		<Html>
			<![CDATA[
				<table cellspacing="0" cellpadding="0" width="100%" border="0">
					<tbody>
						<tr>
							<td width="50%">
							<h3>Title 1</h3>
							</td>
							<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
							<td width="50%">
							<h3>Title 2</h3>
							</td>
						</tr>
						<tr>
							<td>Text 1</td>
							<td>&nbsp;</td>
							<td>Text 2</td>
						</tr>
					</tbody>
				</table>
				More text goes here.
			]]>
		</Html>
	</Template>
	<Template title="Text and Table" image="template3.gif">
		<Description>A title with some text and a table.</Description>
		<Html>
			<![CDATA[
				<table align="left" width="80%" border="0" cellspacing="0" cellpadding="0"><tr><td>
					<h3>Title goes here</h3>
					<p>
					<table style="FLOAT: right" cellspacing="0" cellpadding="0" width="150" border="1">
						<tbody>
							<tr>
								<td align="center" colspan="3"><strong>Table title</strong></td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
						</tbody>
					</table>
					Type the text here</p>
				</td></tr></table>
			]]>
		</Html>
	</Template>
</Templates>

を

<Templates imagesBasePath="fck_template/images/">
	<Template title="写真付きテキスト" image="template1.gif">
		<Description>どんなタイプのページにももってこいのベーシックテンプレートです。</Description>
		<Html>
			<![CDATA[
				<h1>タイトル</h1>
				<img class="photo_l" height="140" alt="" width="100" />
				<h2>h2タイトル</h2>
				説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト
			]]>
		</Html>
	</Template>
	<Template title="tableless 2columns layout" image="bcool_2column.gif">
		<Description>テーブルレスな２カラムレイアウト。</Description>
		<Html>
			<![CDATA[
			<h2>タイトル</h2>
				<div class="fl_left" style="width:47%; padding:0 0 10px;">
					<h3>項目タイトル</h3>
					テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
				</div>
				<div class="fl_right" style="width:47%; padding:0 0 10px;">
					<h3>項目タイトル</h3>
					テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
				</div>
				<div class="clear"></div>
			]]>
		</Html>
	</Template>
	<Template title="tableless 3columns layout" image="bcool_3column.gif">
		<Description>テーブルレスな３カラムレイアウト。</Description>
		<Html>
			<![CDATA[
			<h2>タイトル</h2>
				<div class="fl_left" style="width:27%; padding:0 3% 10px;">
					<h3>項目タイトル</h3>
					テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
				</div>
				<div class="fl_left" style="width:27%; padding:0 3% 10px;">
					<h3>項目タイトル</h3>
					テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
				</div>
				<div class="fl_left" style="width:27%; padding:0 3% 10px;">
					<h3>項目タイトル</h3>
					テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
				</div>
				<div class="clear"></div>
			]]>
		</Html>
	</Template>
	<Template title="表組み" image="bcool_table.gif">
		<Description>会社概要やリクルートの募集要項などにどうぞ。</Description>
		<Html>
			<![CDATA[
			<h1>タイトル</h1>
				<table border="0" cellspacing="2" cellpadding="1" class="outer">
					<tr>
						<td class="head">項目１</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目２</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目３</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目４</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目５</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目６</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目７</td>
						<td class="odd">テキスト</td>
					</tr>
					<tr>
						<td class="head">項目８</td>
						<td class="odd">テキスト</td>
					</tr>
				</table>
			<h2>h2項目</h2>


			]]>
		</Html>
	</Template>
</Templates>

に。

アイコン用の画像は、下のものを右クリック保存で、 /common/fckeditor/editor/dialog/fck_template/images/ に入れてください。

メニューのシンプル化

このあたりは定番だと思いますが、私には標準で用意されているメニューがあまりに高機能すぎるので、ある程度シンプル化させています。修正する場所はfckconfig.jsの93行目～

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'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink','Anchor'],
	['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','UniversalKey'],
	'/',
	['Style','FontFormat','FontName','FontSize'],
	['TextColor','BGColor'],
	['FitWindow','-','About']
] ;

の中身です。一つひとつ読んでいけば意味を読み取れるのでわかるとは思いますが、それすらも面倒な方は、私の設定を参考に！

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