スタッフブログ
こんにちは。なおとです。さっそく本題に入ります。
配布元が公開している以下のドキュメントが、情報源になります。
Plug-ins http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins
これを参考にしつつ、私の体験談を交えながらサラッと書いておこうかと思います。
FCKEditorは「FCKEditor for XOOPS」を利用することを前提にします。 ただし基本的にFCKEditorならば、他のウェブアプリの場合でもほとんど変わらないはずです。
プラグインを書く
Findreplaceプラグインを書く場合、編集するファイルは、以下のようなファイル名になります。
- html/common/fckeditor/editor/plugins/findreplace/fckplugin.js
- html/common/fckeditor/editor/plugins/findreplace/lang/en.js
- html/common/fckeditor/editor/plugins/findreplace/lang/ja.js
- html/common/fckeditor/editor/plugins/findreplace/fck_findreplace.html
- html/common/fckeditor/editor/plugins/findreplace/findreplace.gif
fckplugin.js
プラグインとして動作するのに必須なのは、このファイルだけです。 ファイル名は固定です。
具体的な実装は外部において、それを読み込むようなことも可能です。
私もまだ肝心の中身をあまり把握できていないのですが、標準添付のPlaceholderプラグインをベースに手を入れていく方法で学習しました。
lang/en.js
言語ファイル（英語用）です。 なくても構わないかもしれません。
lang/ja.js
言語ファイル（日本語用）です。 サイトのページ（html）のエンコーディング指定によらず、UTF-8にするとよいかと思います。 （いろいろやりようはあるかもしれません。）
//パネルのアイコンのツールチップ表示に使われます FCKLang.FindreplaceBtn = '検索/置換'; //ダイアログの表題と、同ウインドウのタイトル FCKLang.FindreplaceDlgTitle = '検索および置換をします';
fck_findreplace.html
ダイアログのhtmlファイルです。文字コードはUTF-8ということになっています。 しかし具体的なメッセージは言語ファイルを使うことにして、こちらには日本語は使わず、US-ASCII相当の文字のみを使うとよいかと思います。
findreplace.gif
パネルに配置するアイコン（ボタン）の画像です。 パネルに配置しないのであれば不要です。 ファイル名は任意です。
大きさはタテヨコそれぞれ16ピクセル、背景は透過にしておくとよいでしょう。
プラグインの動作設定
プラグインが出来上がったとして、設定ファイルを編集します。
- html/common/fckeditor/fckconfig.js
プラグインディレクトリの指定
fckconfig.jsに既に書いてありました。 これはあえて変更する必要はないでしょう。
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/';
プラグインの有効化
公式のドキュメントの通りにします。
FCKConfig.Plugins.Add('findreplace', 'en,ja');
言語ファイルを使わない時は、次のような書き方になります。
FCKConfig.Plugins.Add('samples');
重要な点として、大文字小文字の区別があります。 findreplaceはプラグインディレクトリ配下のパス名として使われるので、パス名が小文字ならこの指定も小文字になります。 プラグインの名前を先頭大文字などにしている場合は注意が必要です。
パネルのカスタマイズ
公式のPlug-insページには、この先がほとんど書かれていません。 しかし上記のように書いてプラグインを有効化しても、勝手にパネルにボタンが増えたりしません。
そのことも設定しなくてはならないのですが、慣れないとこういったことも分からずに、右往左往してしまうものです。（私のことです）
パネルのカスタマイズについては、グーグルなどの検索でいくつか情報が見つかります。 ですので詳しく説明しませんが、プラグイン名を「Findreplace」として作成していたなら、次のような感じになります。
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','Findreplace','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
];
FCKConfig.ToolbarSets["Default"]にも追加しておきます。
スタイルシート
必要に応じて、編集エリアのCSSを定義しているファイルを編集します。
- html/common/fckeditor/editor/css/fck_editorarea.css
fckplugins.jsの書き方
標準添付のPlaceholderプラグインを参考に作った「Findreplace」プラグインというものを想定して、プラグインの実装のうち、共通処理の冒頭部分だけ説明します。
// Register the related command.
FCKCommands.RegisterCommand(
'Findreplace',
new FCKDialogCommand(
'Findreplace',
FCKLang.FindreplaceDlgTitle,
FCKPlugins.Items['findreplace'].Path + 'fck_findreplace.html',
340, 240
)
);
'Findreplace'のように、プラグイン名を決めています。この名前を使ってパネルに登録したり、スクリプトから実行するなどできます。
いっぽう、FCKPlugins.Items['findreplace'].Pathという記述が見えます。 fckconfig.jsでの設定などから導かれるので、'findreplace'と小文字になっています。 この違いは先ほど説明したように、パス名に由来するためです。
// Create toolbar button.
var oFindreplaceItem = new FCKToolbarButton('Findreplace', FCKLang.FindreplaceBtn);
oFindreplaceItem.IconPath = FCKPlugins.Items['findreplace'].Path + 'findreplace.gif';
FCKToolbarItems.RegisterItem('Findreplace', oFindreplaceItem);
この部分がパネルに配置できるようにする部分です。 findreplace.gifがアイコン画像のファイル名です。
この先は実際にプラグインの動きを書くことになるのですが、まだまだ紆余曲折が待っています。
しかし冒頭でも書いたように、正直に言って私もまだ勉強中のため、割愛させていただきます。 なにか参考情報がありましたら教えていただけるとうれしいです。
以上で説明は終わります。
トラックバック
