elFinder - file manager for web
elFinder는 웹에서 파일관리가 가능한 오픈소스 파일관리자입니다. 디자인이 간결하고 다양한 파일관리 기능을 가지고 있습니다.
[elFinder 기능 정리]
- 서버간 파일 작업(복사, 삭제, 이동, 업로드, 폴더/파일의 생성, 이름변경 등)
- ftp, 클라우드 연계
- 사용 편의
- 드래그앤드롭 지원
- 파일 편집 : 이미지, 텍스트
- 폴더 한방에 비우기
- 각종 파일정보의 표시 / 디렉토리 용량 확인
- 썸네일 생성 : 심지어는 ftp 로 연결된 디스크의 썸네일도 생성됨 - 안전성(파일 삭제시 휴지통에 넣어 복구가 가능)
- 사용자 기능 설정 : Custom
- 툴바, 팝업메뉴 사용자 설정 : Custom Context menu
- 멀티 디스크 : Multiple Roots
- 가볍고 빠른 성능 : 소스 용량이 4MB가 안됨.
- 다양한 파일관리 기능
- 업로드된 파일을 zip, rar, 7z, tar, gzip, bzip2 으로 압축
- 이미지파일, 텍스트파일의 생성과 편집 : txt, jpeg, png, bmp, pxd, svg, tiff, dng, webp, xcf, psd, ppm, sketch
- 이미지파일의 오픈소스 웹툴로 연계한 고급 편집 : TUI Image Editor, Pixlr Editor, Pixlr Express, Photopea, Online Convert
- 파일 검색, 정렬, 필터 - web 편집기와의 통합 : elRTE, CKEditor, TinyMCE
- 지원 웹프라우저 : 파이어폭스, Internet Explorer, 사파리, 오페라, 크롬 등
- 서버 요구 조건 : 웹서버, PHP
| 이 자료는 elFinder 설치과정에 대한 기본적인 방법을 개인적인 필요에 따라 기억하기 위해 작성한 글입니다. 보다 전문적인 내용은 해당 안내( https://studio-42.github.io/elFinder/ )를 참고하시기 바랍니다. 제가 설치한것과 다른 방법이나, 보다 효율적인 방법을 알고 계시면 댓글 남겨주시면 감사드리겠습니다. |
1. elFinder 설치 ( elFinder 2.1.42 / 출처 https://studio-42.github.io/elFinder )
서버에 업로드 합니다. 예시) root/elFinder
/elFinder/*.*
2. 필요한 파일들을 생성해 줍니다.
elFinder.php
elfinder.html → elfinder.php 등으로 고쳐 사용해도 됨
이 파일을 ckeditor/config.js 에서 아래와 같이 불러오게 됨.
config.filebrowserBrowseUrl = '/elFinder/elFinder.php';
config.filebrowserImageBrowseUrl = '/elFinder/elFinder.php';
만일 파일관리자만 실행하려고 하면 이 파일을 열면 됩니다.
예) https://www.yangel.org/elFinder/elFinder.phpLine> 1
XE 로그온 연동
Line> 10
Line> 17
<?php
define('__XE__', true);
require_once("../xe경로/config/config.inc.php");
$oContext = &Context::getInstance();
$oContext->init();$logged_info = Context::get('logged_info');
$logged_info->is_admin;
$yangel_user_id=$logged_info->user_id;
?>
<script data-main="./main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
아래와 같이 XE 로그인 상태에 따라 접속방식을 다르게 할 수 있겠네요.
<script
<? if($logged_info->is_admin == 'Y'){ ?>
data-main="./main.관리자.js"
<? } ?>
<? if($logged_info->is_admin){ ?>
data-main="./main.사용자.js"
<? } ?>
<? if(!$logged_info->is_admin){ ?>
data-main="./main.손님.js"
<? } ?>
src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<script>
define('elFinderConfig', {
// elFinder options (REQUIRED)
// Documentation for client options:
// https://github.com/Studio-42/elFinder/wiki/Client-configuration-optionsdefaultOpts : {
url : 'php/connector.관리자.php'... ... ...
, height : '100%' // optional
, resizable : false // optional
}
}
});
</script>위 부분을 아래와 같이 XE 로그온 상태에 따라 다르게 불러오도록 설정
<? if($logged_info->is_admin == 'Y'){ ?>
<script>
... ... ...
url : 'php/connector.관리자.php'
... ... ...
</script>
<? } ?>
<? if($logged_info->is_admin){ ?><script>
... ... ...
url : 'php/connector.사용자.php'
... ... ...
</script>
<? } ?>
<? if(!$logged_info->is_admin){ ?><script>
... ... ...
url : 'php/connector.손님.php'
... ... ...
</script>
<? } ?>
Line> 62
For CKEditor
managers : {
// 'DOM Element ID': { /* elFinder options of this DOM Element */ }
'elfinder': {}
}
});
</script>
</head>*** 윗 부분을 아래와 같이 수정 ***
managers : { // 'DOM Element ID': { /* elFinder options of this DOM Element */ } 'elfinder': { getFileCallback : function(file, fm) { window.opener.CKEDITOR.tools.callFunction((function() { var reParam = new RegExp('(?:[\?&]|&)CKEditorFuncNum=([^&]+)', 'i') ; var match = window.location.search.match(reParam) ; return (match && match.length > 1) ? match[1] : '' ; })(), fm.convAbsUrl(file.url)); fm.destroy(); window.close(); } , height : '100%' // optional , resizable : false // optional } }main.js main.default.js → main.js 로 복사
→ main.admin.js , main.gyest.js 등으로 변형하여 사용함Line> 106
Line> 107
Line> 128
'extras/editors.default.min' → extras/editors.default.min.js
'elFinderConfig' → elFinderConfig.js
'elfinder' : 'elfinder.min', → js/elfinder.min.js
editors.default.min.js elfinder.min.js
elfinder.js
elfinder.js 원본 파일
elfinder.min.js 최적화 파일
→ elfinder.files.js 등 적당한 파일로 변형하여 사용
mail.js 에서 이파일을 정의함Line> 891
Line> 11607
Line> 10823
폴더창 크기 조절
if (this.src && this.src.match(/js\/elfinder(?:-[a-z0-9_-]+)?\.(?:min|full|관리자)\.js$/i)) {
myTag = $(this);
return false;
}※ 이 파일명을 elfinder.관리자.js 로 하는 경우 위와 같이 "관리자"를 추가해 줘야 정상 작동함
uiOptions : {
// toolbar configuration 툴바를 정의함
// navbar options
navbar : {
minWidth : 150,
maxWidth : 500,
// auto hide on initial open
autoHideUA: [] // e.g. ['Mobile']
},***** 아래와 같이 수정 *****
// navbar options
navbar : {
minWidth : 80, // 너비 최소
maxWidth : 300, // 너비 최대
// auto hide on initial open
autoHideUA: ['Mobile'] // 모바일 자동 숨김
},
connector.관리자.php
마우트 설정 부분
connector.minimal.php-dist → connector.관리자.php 등으로 수정하여 사용함.
접근하려는 폴더, ftp, 구글드라이브 등에 대한 설정을 하게 됨.
'roots' => array(
// 이 부분 아래에 마우트를 설정함
// 폴더를 설정하는 경우
array(
'driver' => 'LocalFileSystem',// driver for accessing file system (REQUIRED)
'path' => '.이미지경로',// path to files (REQUIRED)
'URL' => dirname($_SERVER['PHP_SELF']) . '이미지경로',// URL to files (REQUIRED)
'trashHash' => 't1_Lw',// elFinder's hash of trash folder
'alias' => $yangel_user_id.'(img)',
'winHashFix' => DIRECTORY_SEPARATOR !== '/',// to make hash same to Linux one on windows too
'uploadDeny' => array('all'),// All Mimetypes not allowed to upload
'uploadAllow' => array('image', 'text/plain'),// Mimetype `image` and `text/plain` allowed to upload
'uploadOrder' => array('deny', 'allow'),// allowed Mimetype `image` and `text/plain` only
'accessControl' => 'access'
),
// ftp 설정
array(
'driver' => 'FTP',
'host' => 'ftp주소',
'user' => '계정',
'pass' => '비번',
'path' => '마운트 할 경로',
'tmbPath' => '썸네일생성경로',
'tmbURL' => dirname($_SERVER['PHP_SELF']) . '썸네일생성경로',
'tmpPath' => '/썸네일생성경로',
'alias' => '마운트할때 보여지는 이름'
),
// Trash volume 휴지통 설정
array(
'id' => '1',
'driver' => 'Trash',
'path' => '휴지통경로',
'tmbURL' => dirname($_SERVER['PHP_SELF']) . '/휴지통썸네일경로',
'winHashFix' => DIRECTORY_SEPARATOR !== '/',
'uploadDeny' => array('all'), // 모든 업로드 금지
'uploadAllow' => array('all'), // Same as above
'uploadOrder' => array('deny', 'allow'), // Same as above
'accessControl' => 'access', // Same as above
'alias' => '쓰레기통 이름'
)masterImages 폴더는 읽기는 가능하고
쓰기(삭제) 거부됨
array(
'driver' => 'LocalFileSystem','path' => '../../maserimages/',
... ... ...
'alias' => 'masterImages',
'accessControl' => 'access',
'defaults' => array('read' => true, 'write' => false)
),
댓글(4) 남기기...
폴더의 업로드 용량 제한