編集エリアに CSS を設定する方法

FCKeditor では、編集エリアの CSS を指定する事ができる。
これにより、実際のページと同じイメージで編集ができる。

指定方法は以下の通り。

1. CSS を外部ファイルで準備する。
2. FCKConfig,EditorAreaCSS に CSS の外部ファイルのパスを設定する。
3. 複数の外部ファイルを指定するには、配列で設定する。

例えば、以下の様に設定する。

FCKConfig.EditorAreaCSS = new Array( '/css/common.css', '/css/box.css', '/css/detail.css' ) ;

動的に指定するには、以下の様にする。

<script type="text/javascript"><!--
...
window.onload = function()
{
...
oFCKeditor.Config['EditorAreaCSS'] = '/js/<?php echo $_SESSION[ 'code' ] ; ?>.css' ;
...
oFCKeditor.ReplaceTextarea() ;
}
...
// -->
</script>

と、ここまでは良いのだが、複数の外部ファイルに動的なものを含めようとするとうまく行かない。
たとえば、以下のような場合。

<script type="text/javascript"><!--
...
window.onload = function()
{
...
oFCKeditor.Config['EditorAreaCSS'] = new Array( '/css/common.css', '/css/box.css', '/css/detail.css', '/js/<?php echo $_SESSION[ 'code' ] ; ?>.css' ) ;
...
oFCKeditor.ReplaceTextarea() ;
}
...
// -->
</script>

原因は、以下の理由だった。

1. Config[ パラメータ ] で設定した値は、いったんhiddenフィールドに格納される。
2. このとき Array の値は , (カンマ)でつなげた値になる。
3. FCKeditor は上記hiddenフィールドより設定を行う。

対策としては、EditorAreaCSS パラメータを , (カンマ)で分解すれば良い。

しかし、プラグインでもカスタム設定ファイルでも対策できない。
これらが読み込まれる前に上記処理が行われるためだ。

結局、fckeditor/fckconfig.js の末尾に以下を追加して対策した。

// Fix EditorAreaCSS
FCKConfig.ProcessHiddenField = function()
{
this.PageConfig = new Object() ;
// Get the hidden field.
var oConfigField = window.parent.document.getElementById( FCK.Name + '___Config' ) ;
// Do nothing if the config field was not defined.
if ( ! oConfigField ) return ;
var aCouples = oConfigField.value.split('&') ;
for ( var i = 0 ; i < aCouples.length ; i++ )
{
if ( aCouples[i].length == 0 )
continue ;
var aConfig = aCouples[i].split( '=' ) ;
var sKey = decodeURIComponent( aConfig[0] ) ;
var sVal = decodeURIComponent( aConfig[1] ) ;
if ( sKey == 'CustomConfigurationsPath' )	// The Custom Config File path must be loaded immediately.
FCKConfig[ sKey ] = sVal ;
else if ( sKey == 'EditorAreaCSS' )			// The Editor Area CSS.
FCKConfig[ sKey ] = sVal.split( ',' ) ;
else if ( sVal.toLowerCase() == "true" )	// If it is a boolean TRUE.
this.PageConfig[ sKey ] = true ;
else if ( sVal.toLowerCase() == "false" )	// If it is a boolean FALSE.
this.PageConfig[ sKey ] = false ;
else if ( sVal.length > 0 && !isNaN( sVal ) )	// If it is a number.
this.PageConfig[ sKey ] = parseInt( sVal, 10 ) ;
else							            // In any other case it is a string.
this.PageConfig[ sKey ] = sVal ;
}
}

FCKConfig.ProcessHiddenField() を上書きしている。
上書きで以下を追加しているだけだ。

else if ( sKey == 'EditorAreaCSS' )			// The Editor Area CSS.
FCKConfig[ sKey ] = sVal.split( ',' ) ;