2011年5月15日日曜日

CKeditorを画像ファイルアップロード可能にする方法

以前から、色々と重宝してるCKEditorですが
デフォルトでは、画像のリンクは出来ますが、画像のファイルアップローダーは付いてないってことで

外部プラグイン「CKfinder」を利用します。
色々と調べると、有料版とか有償版とか書かれてるのですが
たぶん無料で使えます。
ただこんなコメント出てますので意味不明です(笑
「This is the DEMO version of CKFinder. Please visit the CKFinder web site to obtain a valid license.」
まぁとりあえず使えるならDEMOバージョンだろうがどーだっていい。

ってことで,設定を。

まずはCKfinderをDL
最新の物が良いかもしれないですね。

DLしたら、ファイルをサーバーへアップロード(好きな所へ)
アップロードしたら、CKfinderの中の
config.phpを触ります。

33行目のreturn false;をreturn true;へ変更
63行目の$baseUrl = '/user/userfile/'; を 好きなURLヘ変更します。
63行目で書いた場所が画像のアップロード先になります。
これで設定はほぼ完了。簡単。

config.jsの中の
language = "fr"とかってなってるコメントされてるところを
jaとして、コメントはずしてもOK
ちなみに、今回は触りませんが、ここでスキンの設定も出来そうですね。

次は参照元(先)を追加します。
<script type="text/javascript" src="/参照元/ckfinder/ckfinder.js"></script>

次に、今まで使っていたCKeditorですが
CKfinderを入れる前はたぶんこんな感じになってるのかな
<textarea id="ckeditor" class="ckeditor" name="details"></textarea>

これを変更せずに

<script type="text/javascript">
// This is a check for the CKEditor class. If not defined, the paths must be checked.
if ( typeof CKEDITOR == 'undefined' ){
//CKエディタが見つからん時の処理
}else{
var editor = CKEDITOR.replace( 'ckeditor' );
CKFinder.setupCKEditor( editor, '/参照元/ckfinder/' );
 ) ;
}
</script>

とします。


とまぁこれで、設定完了です。
超簡単でした。

0 件のコメント:

コメントを投稿