포스트 보기

[Library] 08. 파일 관리툴 CKFinder 설치 및 초기화

: 8 : cheolee

: 공부 > 블로그개발 : 46 : 2021-07-23

앞서 설치한 CKEditor의 이미지 추가/편집 기능을 확장하기 위해 같은 회사에서 개발하여 제공하고 있는 온라인 파일 관리툴 CKFinder를 설치합니다.

CKFinder의 경우 부가적인 솔루션이기에 기본적으로 Demo 버전을 제공하고 있으나, 포스트를 작성함에 있어 불편함은 없습니다.

버전은 가장 최신 버전 CKFinder 3을 선택하였습니다.

CKFinder 3 설치

STEP 1) 설치파일을 다운로드 합니다.

CKFinder 다운로드 페이지

STEP 2) 다운로드 받은 파일을 압축해제 하여 프로젝트 폴더에 복사합니다.

ex) ~/js/lib/ckfinder

CKFinder 3 초기화

STEP 1) ckfinder 스크립트 소스를 추가합니다.

~/application/views/home.php 파일 <head>에 아래의 내용 추가

	
			1
2

			<!-- ckfinder 3 -->
<script src="/js/lib/ckfinder/ckfinder.js"></script>

			cs

STEP 2) 자바스크립트 코드를 추가합니다.

ckeditor 4 설치 시 추가한 코드 위치에 아래와 같이 ckfinder 설정 코드 추가

	
			1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

			<script>
  $(function(){
      // ckeditor 4
      var editor = CKEDITOR.replace( 'content' );
      // ckfinder 3
      CKFinder.setupCKEditor( editor ,{
          skin: 'jquery-mobile',
          swatch: 'b',
          onInit: function( finder ) {
              finder.on( 'files:choose', function( evt ) {
                  var file = evt.data.files.first();
                  console.log( 'Selected: ' + file.get( 'name' ) );
              });
          }
  
      },
      {
          type: 'Files',
          currentFolder: '/archive/'
      });
  });
</script>
Colored by Color Scripter

			cs
		

STEP 3) ckfinder filebrowser 커스텀 설정을 위해 ckeditor 설정파일을 수정합니다.

~/js/lib/ckeditor/config.js -> 아래와 같이 관련 내용 추가

	
			1
2
3
4
5
6
7

			CKEDITOR.editorConfig = function( config ) {
    config.filebrowserBrowseUrl = '/js/lib/ckfinder/ckfinder.html';
    config.filebrowserUploadUrl = '/js/lib/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
    config.toolbarGroups = [
        (생략)
    ];
}
Colored by Color Scripter

			cs
		

STEP 4) fileinfo 관련 오류 해결을 위해 php 설정 내용을 추가합니다.

~/php/php.ini

STEP 5) ckfinder 설정파일을 수정합니다.

~/js/lib/ckfinder/config.php
filebrowser 권한 오류 해결을 위해 아래 항목 수정

	
			1
2
3
4
5
6

			<?
...(생략)
$config['authentication'] = function () {
    return true;
};
(생략)...
Colored by Color Scripter

			cs
		

파일 업로드를 위한 baseurl 확인 및 수정

	
			1
2
3
4
5
6
7
8
9
10
11
12

			<?
...(생략)
$config['backends'][] = array(
    'name'         => 'default',
    'adapter'      => 'local',
    'baseUrl'      => '/js/lib/ckfinder/userfiles/',
//  'root'         => '', // Can be used to explicitly set the CKFinder user files directory.
    'chmodFiles'   => 0777,
    'chmodFolders' => 0755,
    'filesystemEncoding' => 'UTF-8',
);
(생략)...
Colored by Color Scripter

			cs
		

STEP 6) CKFinder 3 초기화 상태를 확인합니다.

브라우저 재실행 후 서버에 접속하여 이미지 도구 버튼 클릭

'업로드' 탭과 '서버 탐색' 버튼이 생겼다면 정상 초기화 상태

이미지 추가/편집 기능까지 확장하여 원활한 포스트 작성을 위한 준비가 완료되었습니다.

비밀글