IMUZA.com

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

ホーム / javascript / さらに「Laravel4入門」CKEditor + KCFinder に苦労する

さらに「Laravel4入門」CKEditor + KCFinder に苦労する

2014/12/3 javascript, laravel4

Larave と言うよりも Javascript 系のツールの話題です。

Laravel を使ったこのブログシステムでは、HTMLエディターにCKEditor を使っていますが、イメージは直接入力しかできません。同じソフトウェアベンダに CKFinder というファイルブラウザがありますが、こちらには有料のライセンスが必要です。そこで似たような名前の KCFinder というGPLライセンスのものを入れてみました。

インストール方法はいろいろ紹介されている通りなんですが、私の場合は KCFinder のパス設定とアクセス制限に苦労しましたのでその記録です。

KCFinder のパス設定

このブログシステムは(サーバルート)/laravel4-blog/ 以下のサブディレクトリで運用していますので、ckeditor/config.js に追加する KCFinder のパスが結構面倒なことになります。ですのでスクリプト自身の URL から取得することにしました。

URL を取り出すスクリプトは、「 [Tipsというかメモ] 」を参考にさせていただきました。

ckeditor/config.js

CKEditor と KCFinder は public 以下の同じ階層に入れています。

CKEDITOR.editorConfig = function( config ) {
(略)
  config.filebrowserBrowseUrl = root + ‘kcfinder/browse.php?type=files’;
  config.filebrowserImageBrowseUrl = root + ‘kcfinder/browse.php?type=images’;
  config.filebrowserFlashBrowseUrl = root + ‘kcfinder/browse.php?type=flash’;
  config.filebrowserUploadUrl = root + ‘kcfinder/upload.php?type=files’;
  config.filebrowserImageUploadUrl = root + ‘kcfinder/upload.php?type=images’;
  config.filebrowserFlashUploadUrl = root + ‘kcfinder/upload.php?type=flash’;
  config.filebrowserImageWindowWidth = 800;
  config.filebrowserImageWindowHeight = 600;

};

var root;
var scripts = document.getElementsByTagName(“script”);
var i = scripts.length;
while (i–) {
  var match = scripts[i].src.match(/(^.+\/)ckeditor\/ckeditor\.js$/);
  if (match) {
    root = match[1];
    break;
  }
}

ついでにデフォルトのウィンドウでは大きすぎましたのでサイズも変更しています。設定は filebrowserWindow** ではなく filebrowserImageWindow** でした。

kcfinder/conf/config.php

アップロードディレクトリは同階層に作り、同じように URL 共々自分自身から取得しています。

セッション関係の二行がアクセス制限です。KCFinder は設定項目の  ‘disabled’ => true, でアクセス制限しており、false にしないと書き込めないのですが、そうしますと誰でも書き込めてしまいます。

Laravel の認証チェック Auth::check() を何とか使おうとやってみたのですが、私のスキルではどうしてもうまくいきません。結局セッションを使うことで何とか制限できたようです。ログイン時にセッション変数 isLoggedIn を true にセットしています。

$requesturi = $_SERVER[‘REQUEST_URI’];
preg_match(‘/(^.+\/)kcfinder\/.*$/’, $requesturi, $uri);
$uploadurl = $uri[1] . “upload”;

$filepath = dirname(__FILE__);
preg_match(‘/(^.+\/)kcfinder\/conf$/’, $filepath, $dir);
$uploaddir = $dir[1] . “upload”;

session_start();
$flg = ( $_SESSION[‘isLoggedIn’] ) ? false : true;

$_CONFIG[‘disabled’] = $flg;
$_CONFIG[‘uploadURL’] = $uploadurl;
$_CONFIG[‘uploadDir’] = $uploaddir;

ログイン時

session_start();
$_SESSION[‘isLoggedIn’] = true; 

ログアウト時

session_start();
unset( $_SESSION[‘isLoggedIn’] );

ということで、こんな感じになりました。イメージアイコンをクリックして出るダイアログに「サーバブラウザ」というボタンが現れています。

ボタンをクリックすると、

あら!? IE は対応していないと出ます。まさかとは思いますが、とりあえずは置いておいて chromeで、

となりました。めでたしめでたし。

MX Player の AC3 コーデックがないと言われたら ARMv7 NEON を入れる
さらに「Laravel4入門」 KCFinder を単独 stand alone で使う
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/09/26

IntersectionObserverで要素の位置を知る

2023/09/14

GDPRを設定する

2023/08/30

scroll-behavior:smoothは履歴に残る

2023/08/22

要素がトップにきたことを感知する-IntersectionObserver

2023/08/8

ホームページとは別に投稿一覧ページをつくる方法-WordPress

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ215
  • WebTips110
  • javascript101
  • Joomla!88
  • Wordpress79
  • Windows68
  • CSS64
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google36
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com