7. ckfinder를 사용한 이미지 업로드

7. ckfinder를 사용한 이미지 업로드

 

ckfinderor 3.4.1버전이 잘 안 되서 2.6.2.1버전을 사용했다.

 

ckeditor4.6.2_full (korea language를 추가한 후에 download를 해야 config.language = 'ko';가 적용이 된다.

 

ckeditor폴더는 free_board(내가 사용하는 폴더)안에 넣는다.

root디렉토리 바로 아래에 upload/images/ 폴더를 만들고 777로 만든다.

upload 폴더 안에 upload.php를 만들어 넣는다.

 

config.js에 //ckfinder설정과 //글꼴설정을 아래와 같이 한다.

 

CKEDITOR.editorConfig = function( config ) {

// CKFinder 설정

config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html';

config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?type=Images';

config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?type=Flash';

config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';

config.filebrowserImageUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';

config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

//plugin설정

   config.extraPlugins = 'youtube' ; // plugins폴더안에 youtube플러그인 폴더를 추가해야 한다.

// 글꼴 설정

config.language = 'ko';

config.font_names = '맑은 고딕; 돋움; 바탕; 돋음; 궁서; Nanum Gothic Coding; Quattrocento Sans;' + CKEDITOR.config.font_names;

:

:

 

 

ckfinder2.6.2.1

 

config.php:

1.

function CheckAuthentication()

{

return true;//false에서 true로 고친다.

}

:

:

2.

$baseUrl = '/upload/images/';

//이미지 파일을 업로드할 폴더를 지정한다. root기준이다.

 

 

적용할 파일

<textarea>가 있는 파일 안에 ckeditor의 상대 경로를 지정한다.

 

<script src='../../ckfinder/ckfinder.js'></script>

 

1. class로 사용할 경우

ckeditor의 config.js안에 ckfinder 설정이 되어있다면 아래와 같이 class를 이용한다.

<textarea class="ckeditor" name="b_contents"></textarea>

 

2. textarea를 사용할 파일 안에 javascript를 사용할 경우

2-1) ckeditor의 config.js가 ckfinder설정이 안되어 있다면 여기서 해줘야 함.

<textarea id="cke" name="b_contents"></textarea>

<script>

CKEDITOR.replace( 'cke',

{

filebrowserBrowseUrl: '/ckfinder/ckfinder.html',

filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images',

filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',

filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'

});

</script>

 

 

2-3) ckeditor의 config.js가 ckfinder설정이 되어 있다면 id명을 이용해서 다음과 같이 해도 된다.

 

<script>

var editor = CKEDITOR.replace( 'editor1' );

CKFinder.setupCKEditor( editor );

</script>