FCKeditorカスタマイズ開発情報(その1)


fckeditorcode_ie.js/fckeditorcode_gecko.jsについて

editor/js/配下にこのファイルは設置されていますが、このファイルはeditor/_source/配下のファイルで生成されたものです。JavaScriptを圧縮したもので、パフォーマンスを目的としてます。
詳しくはこちらのサイトを参考にしてください。

点滅文字Blinkについて

Blinkのカスタマイズを行う場合は、Pluginのリストを探しても存在しません。「リンク」などの機能をコピーしてカスタマイズするしかありません。FCKeditorのディレクトリーで”Link”で検索してください。関連するソースが発見されますので同じ形式で、ソースを組み立てることで構築は可能です。

FCKeditor Marquee(マーキー)のカスタマイズに関して

一部、この機能を導入してカスタマイズ版が出ているようですが、特にそのツールを導入しなくも、上記のようにPlugin版と”Link”の機能をコピーして”Link2″などに すればカスタマイズは難なく可能です。また、FCKeditorで新しいバージョンがリリースされたとき、それにカスタマイズを加えればいいのです。こちらにご連絡をいただければ、カスタマイズをお受けいたします。

別の方法としてMarqueeのプラグインが公開されておりますので、それを使って導入します。このサイトにアクセスしてプログラムを入手して下さい。
導入する手順として、Pluginのディレクトリーに設置し、config.jsにそのパスを記述します。重要なのは、fckeditorcode_ie.js/fckeditorcode_gecko.js の圧縮ファイルで、Marqueeが使用できないような記述があるのでそれを削除する必要があります。
1.editor/_source/internals/fcklistslib.js 31行目
BlockElements : { address:1,…..,hr:1,marquee:1,noscript:1,…… },

BlockElements : { address:1,…..,hr:1,noscript:1,…… },
2.editor/js/fckeditorcode_ie.js 及びfckeditorcode_gecko.js 約65行目
BlockElements : { address:1,…..,hr:1,marquee:1,noscript:1,…… },

BlockElements : { address:1,…..,hr:1,noscript:1,…… },
3.fckconfig.js 60行目あたりのPluginのパス設定に以下を記述
FCKConfig.Plugins.Add( ‘marquee’ );
4.editor/plugins/marquee/ のディレクトリーを設置し、ダウンロードしたファイルを設置して作業完了です。

デモサイトは、以下のURLでご確認できます。「←A」のアイコンがMarqueeです。(タグは設定できますが、FCKeditor内では文字は流れません)
http://www.ijtc.co.jp/anchor/fckeditor787.php

GetHTML()を使用するに当たって

エディタの入力したデータを入手するにはGetHTML()のメソッドを使用しますが、改行コードBRタグが余計に入力されるバグの存在があります。 現在のところ、バグの修正は完了していないようです。以下の公式発表をご参考にしてください。
http://dev.ckeditor.com/ticket/3023

メソッドGetXHTML()もありますが、このメソッド処理もGetHTML()と同じ処理をしており、BRタグが余計に入力されます。 FCKeditorで入力された文字を同時に拾うためには、この関数は必須で、これ以外の関数はFCKeditor内では存在しません。
また、GetHTML()で入手したデータはあくまでもクライアント側にてデータを保持する必要があります。Cookieの場合は、 記憶容量の制限があり、キャッシュで記録する方法を選択すると、FCKeditorのダイアログウィンドウでキャッシュが保持される 場合が多いためどれも欠点があります。

そこで検討したのが、入力した文字ごとにPOSTする方法です。以下のサイトが参考になると思います。
http://www.ijtc.co.jp/anchor/FCKEditor2/index.php#

また、以下のFCKeditor_OnComplete関数を使用することで、エディタで入力されたると自動的にPOST処理をすることができると思います。
function FCKeditor_OnComplete( oFCKeditor ){
 oFCKeditor.Events.AttachEvent( ‘OnSelectionChange’, function() {
  $(‘form#myform’).submit();
  return false;
 }) ;
}

上記の方法を用いて、以下のスマートフォン用のエディタを弊社で開発しました。
http://www.ijtc.co.jp/anchor/testing12.php

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

FCKeditorには、テンプレートを使用できるようになっていますが、実際にカスタマイズするには 以下のファイルを修正します。
data/class/pages/admin/products/fck/fcktemplates.xml

ソースの修正は以下の通り。
<Template title=”商品詳細” image=”template1.gif”>
<Description>商品詳細のレイアウトです。</Description>
<Html>
<![CDATA[
<table cellspacing=”0″ cellpadding=”0″ width=”100%” border=”0″ style=”border-right: #000000 2px solid; border-top: #000000 2px solid; border-left: #000000 2px solid; border-bottom: #000000 2px solid”>
<tbody>
<tr>
<td>
<h4>■ポイント1</h4>
<h4>■ポイント2</h4>
<h4>■ポイント3</h4>
</tr>
</tbody>
</table>
テキスト  テキストテキストテキスト<br />
テキスト  テキストテキストテキスト
]]>
</Html>
</Template>

絵文字の画像のパスをhttp://から記述するには

メルマガ用に絶対パスを設定する必要がある場合は、
fck/fckconfig.jsのファイル336行目を
以下の通り変更する。

FCKConfig.SmileyPath = FCKConfig.BasePath + ‘images/smiley/msn/’ ;

FCKConfig.SmileyPath =‘http://www.ijtc.co.jp’ + FCKConfig.BasePath + ‘images/smiley/msn/’ ;

Webアプリケーション開発に戻る