読者です 読者をやめる 読者になる 読者になる

@半径とことこ60分

人間の認知範囲なんてそんなもんさと、鳥が囀った

さらに「Laravel4入門」 KCFinder を単独 stand alone で使う

こんな感じに背景画像を入れられるように基本設定で画像選択が出来るようにしようと思います。

f:id:ausnichts:20141204132024p:plain

KCFinder は CKEditor と連携して使う方法はたくさん情報があるのですが、単独で使うための日本語情報が見つかりません。こういう時はやっぱり公式サイトです。Integration Guide(統合方法)にありました。
KCFinder Integration Guide - SunHater Projects
KCFinder Textbox Integration Demo - SunHater Projects

で、デモのスクリプトそのままですが、

$('.bg_image').click(function(){
  window.KCFinder = {
    callBack: function(url) {
      url = url.match(/upload\/images\/.*/);
      $('.bg_image').val(url);
      window.KCFinder = null;
    }
  };
  var match = location.href.match(/(^.+\/)backend\/.*$/);
  window.open(match[1]+'kcfinder/browse.php?type=images&dir=../../upload/images', 'kcfinder_textbox',
'status=0, toolbar=0, location=0, menubar=0, directories=0, resizable=1, scrollbars=0, width=800, height=600'
  );
});

class='bg_image' というテキストボックスをクリックすると KCFinder が立ち上がります。画像をダブルクリックすると、upload ディレクトリ以下のファイル名がテキストボックスに入ります。

f:id:ausnichts:20141204142632p:plain

ついでに、color picker も入れてタイトル文字の色を変更できるようにしました。

Build a User Color Picker with jQuery and Bootstrap - MonsterPost