IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / さらに「Laravel4入門」 KCFinder を単独 stand alone で使う

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

2014/12/4 javascript, laravel4

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

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

さらに「Laravel4入門」CKEditor + KCFinder に苦労する
node.js と Grunt で Bootstrap less ファイルをコンパイルする(自動化)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/08/13

はてなブログProを解約したらエェ〜?!

2022/08/10

WordPress にプラグインなしで fancybox4 導入

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript96
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress38
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com