※[2006/07/22] IEでエラーだったのでデバッグしました。
FirefoxでFCKeditorのテンプレートを使うと、編集エリアが変になってしまう。
具体的には、テンプレートの下に何か書き込もうとすると、左にスクロールバーが表示されて、非常に狭い高さで編集しなくてはならない。
一旦ソースを表示したりすると直るのだが、一般ユーザの方にソース編集機能を公開したくないし、バグで仕方ないのでこうして対応して下さいと説明するのも技術者として恥ずかしい。
しかし、テンプレート機能はとても便利なので何とかしたい。
Firefoxの普及率は、アメリカでは15%になっている様だし。
SourceForgeでパッチやバグを検索したが、対策は見当たらなかった。
結局自分でなんとかしたが、原因を調べるのにかなり手間取った。
原因調査
FCKeditorではHTMLとJavaScriptが入り組んでいる。まず、ページの構造を調べることが重要だ。
Firefoxには「DOM Inspector」という便利なツールがあるのだが、Windows版では初期状態ではインストールされていなかった。
Firefox まとめサイト を参考にさせていただいて、インストールした。
構造を見てみると
設置ページ(iframe) -> fckeditor.html(iframe) -> 編集エリア
となっていた。
原因は、fckeditor.html(iframe)のスタイルに height が設定されないからだった。
対策
修正には FCKeditor/editor/fckeditor.js の Window_OnResize関数を参考にした。FCKeditor/editor/dialog/fck_template.html の SelectTemplate関数を修正して対応した。
function SelectTemplate( index )
{
oEditor.FCKUndo.SaveUndoStep() ;
FCK.SetHTML( FCK._Templates[index].Html ) ;
if ( oEditor.FCKBrowserInfo.IsGecko )
{
var oCell = window.parent.opener.document.getElementById( 'xEditingArea' ) ;
var eInnerElement ;
if ( eInnerElement = oCell.firstChild )
{
eInnerElement.style.height = 0 ;
eInnerElement.style.height = oCell.scrollHeight - 2 ;
}
}
window.parent.Cancel() ;
}
副産物
FCKeditorのダイアログ関連の仕組みがわかって来たので、かなりカスタマイズできるノウハウが身に付いた。
また、標準のテンプレートは、HTML的にあまりお勧め出来ない。
またの機会に「FCKeditor テンプレートカスタマイズ編」を公開しよう。