Lightboxプラグイン

みなさん、Lightboxをご存知ですか?

ブログなどでは画像をポップアップ表示する場合があります。
それのクールなやつと思ってもらったらいいと思います。

詳細は以下を参照してください。

Lightbox JS v2.0
Lightbox JS v2.0の使い方と設置

これをFCKeditorで実現するプラグインを作りました。
このプラグインは、LightboxAddボタンと、LightboxDelボタンを追加し、プレビューを差し替えます。
プレビューでLightboxの動作を確認できます。

ダウンロード : Lightbox.zip
動作確認 : FCKeditor サンプル

解凍して出来た Lightbox フォルダを、プラグインフォルダにコピーしてください。
設定は以下の様に行います(カスタム設定ファイルの場合)。

...
FCKConfig.Plugins.Add( 'Lightbox', 'en,ja' ) ;
...
FCKConfig.ToolbarSets["Sample"] = [
...
['Image','LightboxAdd','LightboxDel','ImageAdjustor','Flash'],
...
] ;

画像を選択すると「Lightboxの挿入/編集」ボタンが有効になります。
「Lightboxの挿入/編集」ボタンをクリックして「Ok」をクリックすると、画像を Lightboxで表示するようになります。

Lightboxを挿入した画像を選択すると、「Lightboxの削除」ボタンが有効になります。
「Lightboxの削除」ボタンをクリックすると、Lightboxでの画像表示が削除されます。

バグ報告など、コメントお待ちしております。

ファイルブラウザーのデバッグ

============================================================================
2007/01/05 02:30
ファイルのアップロードが出来ない不具合がありました。現在は修正済みです。
2007/01/05 02:30 以前にダウンロードされた方は、再度ダウンロードして下さい。
たびたびお手間を取らせ、申し訳ありません。
============================================================================

本腰を入れて「サムネイルを表示するファイルブラウザー」のデバッグをしました。

デバッグの内容は以下の通り。

・Windowsサーバサポート
・ファイルパス処理の書き直し
・文字コードのエスケープをチェック
・Ajax部分の見直し
・エラー時のインターフェイス見直し

ダウンロード : FileBrowser_Thumbnail.zip
動作確認 : FCKeditor サンプル

まあ、要するに全部見直して品質を上げたつもりです。

というのも、商業利用のお問い合わせがあったからです。
オープンソースを使って利益を得て、作者に対して知らんぷりというのはどうかと思います。
なので、今回はなにがしか寄付を頂く事で商業利用を承諾いたしました。

しかし、それもそれなりの品質があってのことです。
また、多くの方に使ってもらって恥をかくのは自分です。

他人に提供するということは、たとえオープンソースであっても責任のあることです。
いまごろ気付くのも馬鹿な話ですが…

今後は最初からこういうつもりで公開して行きます。

FCKeditor – サムネイルを表示するファイルブラウザー

明けましておめでとうございます。本年もよろしくお願いいたします。

さて、「FCKeditor – ささやかなクリスマスプレゼント」 で公開したファイルブラウザーですが、大きなバグが見つかりました。

ダウンロードしてくださった方、どうもすいません。

修正版をダウンロードしてお使いください。
※プラグイン名を変更していますので、FCKeditorの設定を変更してください。

ダウンロード : FileBrowser_Thumbnail.zip
動作確認 : FCKeditor サンプル

IEで漢字(マルチバイト)のファイルをアップロードすると、不明なメッセージを表示してアップロードできません。
もしくは、ファイル名が文字化けします。

Firefoxでは正常に動作していました。原因は、metaタグが抜けていたためでした。

このため、Firefoxではデフォルトの UTF-8、IEではデフォルトの Shift-JIS でファイル名が送信されていました。

また、「Preview」という表現が適当ではありませんでした。
今後は「Thumbnail」と表現することにし、プラグイン名を変更しました。

実は、このサーバのファイル名は EUC-JP なんですが、問題なくファイル処理が出来ています。

次回は Windowsサーバ対応をしたいと思っています。あまり需要は無いかもしれませんが…

みなさんのコメントをお待ちしています。

FCKeditor – ささやかなクリスマスプレゼント

メリークリスマス。あきらから、ささやかなクリスマスプレゼントです。

サムネイルを表示するファイルブラウザー(プラグイン)

画像(180x152)

ファイルブラウザーを作成しました。

・サムネイル表示
・多言語対応
・ファイル・フォルダ削除機能
・ファイル・フォルダリネーム機能
・アップロードファイルサイズ制限機能
・アップロード容量制限機能

ダウンロード

FileBrowser_Thumbnail.zip
※プラグイン名を変更しました。FCKeditorの設定を変更してお使いください。

インストール

ダウンロードしたファイルを解凍し、出来たフォルダを FCKeditor のプラグインパスへコピーします。

設置方法

プラグインに “FileBrowser_Thumbnail” を追加します。
fckconfig.js または カスタム設定ファイルに以下の行を追加します。
※プラグイン名を変更しました。ご注意ください。

FCKConfig.Plugins.Add( 'FileBrowser_Thumbnail', 'en,ja', FCKConfig.BasePath + 'plugins/' ) ;

ファイルブラウザーを自動的に置き換えます。

アップロードフォルダは、FCKeditor の初期化時に、以下のように設定します。

(oFCKeditor.Config[‘ServerPath’])

<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
var oFCKeditor = new FCKeditor('textarea1') ; // textarea の id または name を指定
oFCKeditor.BasePath = '/fckeditor/' ;
oFCKeditor.Width = 760 ;
oFCKeditor.Height = 460 ;
oFCKeditor.ToolbarSet = "Sample" ;
oFCKeditor.Config['CustomConfigurationsPath'] = '/sample.fckconfig.js' ;
oFCKeditor.Config['TemplatesXmlPath'] = '/sample.fcktemplates.xml' ;
oFCKeditor.Config['ServerPath'] = '/upload/user/';
oFCKeditor.ReplaceTextarea() ;
}
// -->
</script>

詳細設定

プラグインの以下のファイルを修正します。

FileBrowser_Thumbnail/connector/php/config.php

今のところ、余分な設定も残っています。必要な個所だけ変更してください。

その他

JavaScript で漢字を含む URI を呼び出す場合、escape では文字化けします。
該当個所を全て encodeURIComponent に変更する必要がありました。
また、サーバ側のファイル操作をする場合は、ファイルシステムの文字コードに合わせる必要があります。
こうしておかないと、ファイルを削除できなくなったりします。
多言語対応はやっぱり骨の折れる作業でした。

参考 : PHPとJSのURIエンコード比較

FCKeditor – ImageAdjustor 公開

お待たせしました。FCKeditor のプラグイン ImageAdjustor を公開します。

ダウンロード : ImageAdjustor.zip

設置方法は一般的なフラグインと同様です。

今回の修正で、プレビュー画面上でマウスによる操作が出来るようにしました。

・画像をドラッグして移動できます。
・左ボタンをクリックすると画像を-90°回転します。
・中ボタンをクリックすると枠を回転します。
・右ボタンをクリックすると画像を90°回転します。
・ホイールで縮小・拡大します。

画像(154x180)

実は、公開したのは、みなさんのお知恵を拝借したいからなのです。
Firefoxで中ボタンをクリックするした時に表示される、スクロール用のアイコンが表示されないようにしたいのです。

なにか良い方法がありましたら、コメントお願いします。

バグや要望もよろしく。

※ Firefoxの自動スクロール機能を無効にすれば問題ありません。
※ JavaScriptで上記を実現する方法をご存知の方、教えてください!

FCKeditor – 画像をWeb上で編集するプラグイン

「FCKeditor – ImageAdjustor 公開」 で公開しました。

※ 一応の完成版に差し替えました。今までにサンプルを実行した方はブラウザのキャッシュをクリアしてお楽しみください。
※ デバッグ用に画像の色数を落としたままでした。現在は治っています。

画像(180x120)

デジカメで撮った写真をWeb上で公開する場合、こんな編集が必要じゃないですか?

・縦横回転/上下回転
・サイズ変更
・切取り

これが簡単に出来てしまうFCKeditorのプラグインを作りました。
ファイル更新部分は PHP + GD で実現しています。

欲しい方はコメントお願いします。コメントが多いようなら公開します。

続きを読む

FCKeditor – 2.3.2 リリース

FCKedito 2.3.2 がリリースされた。2.3系列の最終案定番との位置付けらしい。

さっそくテスト。

まずはダウンロード。
FCKeditor – Download

サンプルを実行してみた。

IEで、ツールバーのレイアウトが崩れる場合があったが、修正されていた。

テンプレートのダイアログが多語化されていた。さらにパッチでの機能だったテンプレートの挿入スイッチが、標準機能になっていた。

テーブルのダイアログのバグはそのまま。
・日本語の翻訳が適当でない。
・キャプションがうまく表示されない。
バグ報告しておくか。

その他、プラグインを追加する時に困った、内部的なバグが消えていた。詳細は省略する。

とにかく、かなり安定したようだ。

fckconfig.js の変更もわずかだ。カスタム設定ファイルを使っている人は、ほとんど影響ないといえる。

みんな、ぜひバージョンアップしよう!

FCKeditor – サンプルのデバッグ

長いことほったらかしていたのですが、やっとデバッグをしました。

FCKeditor – 画像をWeb上で編集するプラグイン

以下をデバッグしました。

1. イメージが枠からはみ出ている場合の切取り
2. プレビュー画面が正しく表示されない

特に 2. は恥ずかしいぐらいのバグです。
POSTの値を stripslashes() する必要がありました。

またサンプルをテストしてみてください!

FCKeditor – コア部分のデバッグ(2)

FCKeditor – コア部分のデバッグ では、コア部分をパッケージングする方法を説明した。

今回は、パッケージングをせずにコア部分のデバッグを行う方法を説明する。

デバッグが単純なら、すぐ修正してパッケージングすれば良いが、複雑な場合、効率が悪い。

実は、これは簡単にできる。

続きを読む