본문 바로가기

IT

[CKEditor/CKFinder] CakePHP + ckeditor/ckfinder 간단예제(윈도우서버/RWAPM)

CakePHP에서 웹기반 WYSIWYG 에디터 사용하기 위해서
네이버 스마트에디터, 다음 오픈에디터, 오픈마루 xquard, CKEditor/CKFinder 를 설치해보았다.

다들 에디터 기능이 좋아져서 어떤걸 붙이더라도 잘 작동하는 것 같다.
하지만 php 환경에서 많은 수정 없이 파일첨부까지 포함한 에디터를 사용하려니 CKEditor 가 제일 설치가 쉽다.

예전 fckeditor버전에서 사용할 때, 생성되는 html 코드가 너무 복잡한 것 같아 많이 사용하지 않았었는데,
새로운 버젼 CKEditor를 만들면서 많이 보완된 것 같다. 설치도 쉽고, 간단하게 내용 넣어보니 생성된 코드도 만족스럽다.

특별히 요청있는거 아니면 CKEditor를 애용해야겠다.


[설치 방법 정리]
※ 윈도우서버2003 + RWAPM, CakePHP 환경에서 설치
※ CakePHP 초보라 설치하여 파일저장 되는 정도만 정리합니다.

1. CKEditor와 CKFinder를 다운받는다.
(fckeditor에는 파일업로드가 포함되어 있었으나 CKEditor로 버젼업 되면서 파일업로드 부분이 CKFinder로 분리되었다. 파일업로드가 필요없으면 CKEditor만 설치해도 된다.)

http://ckeditor.com 사이트와 http://ckfinder.com 사이트에 접속하여
파일을 Download 받는다. (2010년 12월 24일 최신버젼 : ckeditor_3.5.zip / ckfinder_php_2.0.1.zip)



2. 다운받은 두 파일을 압출을 풀고, 설치되어있는 CakePHP webroot 폴더로 복사합니다.
/app/webroot/ 아래에 두 폴더를 복사했습니다.
CKEditor => /app/webroot/ckeditor
CKFinder => /app/webroot/ckfinder



3. CKFinder 폴더의 config.php 파일을 수정합니다.
( 파일을 업로드할 폴더를 /app/webroot/files/upimg/ 로 설치합니다. 설치 경로에 따라 아래 내용을 적절하게 수정합니다. )
  • $baseUrl = '/files/upimg/';
  • $baseDir = "D:/RWAPM/users/test/www/app/webroot/files/upimg/";
  • $config['ResourceType'][] 항목 중 'maxSize'가 0으로 되어있는 부분을 '2M'(서버 용량에 따라)로 수정
    (image, flash, movie 3개항목이 있습니다.)



4. CKEditor를 설치할 CakePHP view 파일 수정

  • view 파일 상단에 javascript파일 불러옵니다.
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
  • 파일 하단에 javascript코드 추가 ( 설치할 textarea의 id가 HtmlpageContent 일 때 )
    <script type="text/javascript">
    window.onload = function() {
      var editor = CKEDITOR.replace( 'HtmlpageContent' , {skin : 'office2003'});
      CKFinder.setupCKEditor( editor, '/ckfinder/' ) ;
    }
    </script>


5. 설치가 끝났습니다.
원하는 폴더로 파일이 잘 올라가는지 테스트 합니다.
파일은 이미지일 경우 /app/webroot/files/upimg/images/ 폴더 안에 생성됩니다.
upimg 폴더 안에 첨부파일의 형식에 따라 폴더가 생성되고 그 안에 파일이 저장됩니다.






※ CKEditor 폴더와 CKFinder 폴더의 index.html 을 열면 다양한 예제가 있습니다.
필요에 따라 예제를 보고 코드를 수정하시면 다양한 형태로 설치 가능합니다.