갑자기 폴더창의 색상을 그라디어트 적용하고 싶어졌음. 

image.png

 

/**
 * Navbar
 */
.elfinder .elfinder-navbar {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#202225+0,3b4047+100 */
background: #191a1c;
background: -moz-linear-gradient(67deg, #191a1c 50%, #535961 100%);
background: -webkit-linear-gradient(67deg, #191a1c 50%,#535961 100%);
background: linear-gradient(67deg, #191a1c 50%,#535961 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191a1c', endColorstr='#535961',GradientType=1 );
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  border: none;
}

 

대각선 67도로 비스듬하게 색상변화 적용 

Atachment
첨부 '1'
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

elfinder/js/elfinder.js

 

/**
* Contextmenu config
*
* @type Object
*/
contextmenu : {

 

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

elFinder Material theme

 

  1. theme( Material.zip ) 파일을 elFinder/css/Material 폴더에 업로드 합니다. 
  2. elFinder.php 파일을 수정합니다. 
    <script>
    	  define('elFinderConfig', {
    	    // elFinder options (REQUIRED)
    	    // Documentation for client options:
    	    // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
    	   defaultOpts : {
    	      cssAutoLoad : ['./css/Material/css/theme.css'],
    	      // Array of additional CSS URLs                   
    	      url : 'php/connector.minimal.php'       //  서버관리자
    	      ,commandsOptions : {


     
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

이렇게 그림을 그릴수 있습니다. 그렇지만 쉽지는 않군요. 

나중에 수정도 할 수 있습니다. 

삽입된 이미지를 삭제하고 이미지 넣기 해서, 현재 보유한 이미지를 수정하면 됩니다. 

 

사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

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

     

     

     

    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.php 

     

    Line> 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-options

                    defaultOpts : {
                        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('(?:[\?&]|&amp;)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.jsmain.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 

      extras editors.default.min.js      
               
      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']  // 모바일 자동 숨김
            },

     

      php

    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)
    ),

           

     

 

 

 

 

 

 

 

 

 

  • dodo 2018.09.02 12:15 SECRET

    "비밀글입니다."

  • dodo 2018.09.07 19:07

    다중 경로 설정

    https://github.com/Studio-42/elFinder/wiki/Multiple-Roots

     

  • dodo 2018.09.16 13:18
    array(
    'driver' => 'GoogleDrive',
    'alias' => 'Google Drive Root Folder',
    'path' => 'root',
    'refresh_token' => '1/**********************'
    )
  • dodo 2018.10.13 08:07

    폴더의 업로드 용량 제한 

     

    $opts = array(
    'roots' => array(
        array(
         'driver'  => 'LocalFileSystem', 
         'path'  => '/path/to/files/', 
         'uploadMaxSize' => '500k' //here which you want to give 
    ); 
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

목록
Board Pagination Prev 1 Next
/ 1
rhwlsghkcocndgus XE1.9.2 STAGE1.5.2
서버에 요청 중입니다. 잠시만 기다려 주십시오...