[PHP] CKEditor + CKFinder 적용하기.

PHP/PHP Setting 2015. 2. 12. 15:18

01. CKEditor 사이트에 접속하여 CkEditor를 다운받는다.(http://ckeditor.com/download)







02. 다음 으로 CKFinder를 다운받는다(http://cksource.com/ckfinder/download)

 ① PHP를 선택한다.

 ② Download Free Trial을 선택하여 CKFinder를 다운받는다






03. 다운받은 CKEditor.zip 파일과 CKFinder.zip 파일을 적용할 프로젝트에서 압축을 해제한다.






04. 먼저 압축이 해제되면 ckfinder 폴더로 이동한다.






05. ckfinder config.php 파일을 텍스트편집기를 통해 수정한다.






06. function CheckAuthentication( ) 을 찾고 return 값을 false에서 true로 변경한다.


변경전

변경후

return false;

return true;








07. 변수 $baseUrl 을 찾는다. $baseUrl은 업로드되는 파일의 위치를 임의로 설정할 수 있는데.

    기본적으로 /ckfinder/userfiles/ 로 설정되어 있다.

    업로드 하는 파일 및 이미지의 경로를 변경하고 싶은경우 해당 부분의 URL을 변경하면 된다.







08. 위 작업이 마무리 되었으면 이제 ckeditor 폴더로 이동한다.







09. config.js 파일을 텍스트 편집기를 통해 수정해야 한다.







10. CKEDITOR.editorConfig = function(config) 에서 아래 내용을 추가하여 준다.


    config.language = 'ko';          // 언어설정
    config.uiColor = "#F0F0F0";    // UI색상변경
    config.height = '560px';          // CKEditor 높이  
    config.width = '600px';           // CKEditor 넓이    

    config.enterMode = CKEDITOR.ENTER_BR;            // Enter 입력시 <br/> 태그 변경
    config.shiftEnterMode = CKEDITOR.ENTER_P;        // Enter 입력시 <p> 태그 변경
    config.startupFocus = true;                                  // 시작시 포커스 설정
    config.font_defaultLabel = 'Gulim';                        // 기본 글씨 폰트
    config.font_names = 'Gulim/Gulim;Dotum/Dotum;Batang/Batang;Gungsuh/Gungsuh;';    // 사용가능한 기타 폰트 설정
    config.fontSize_defaultLabel = '12px';                   // 기본 글씨 폰트 사이즈
    
    // 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';









11. 이제 CKEditor를 적용할 프로젝트의 <textarea>를 확인한다.






12. 아래 해당 스크립트를 <header></header>사이에 적용한다.

<script type = "text/javascript" src = "../ckeditor/ckeditor.js"></script>






13. <textarea>에 클래스를 다음과 같이 class = "ckeditor" 값을 지정해 준다.

<textarea class = "ckeditor" ~~~></textare>






14. 이제 다시 사이트에 접속해 보면 CKEditor가 적용되어 있고 CKFinder의 기능을 사용할 수 있다.