こんな感じに背景画像を入れられるように基本設定で画像選択が出来るようにしようと思います。
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 ディレクトリ以下のファイル名がテキストボックスに入ります。
ついでに、color picker も入れてタイトル文字の色を変更できるようにしました。
Build a User Color Picker with jQuery and Bootstrap – MonsterPost