FCKEditor 의 성능을 그대로 이어받고 더욱 빨라진 CKEditor의 기본적인 설치 방법을 알아보겠습니다.
다시한번 말씀드리지만 기본적인입니다.
그중에서도 PHP를 기반으로 하고 있으며 php 코드를 불러와 사용하는 설치 및 테스트 방법입니다.
보다 발전되고 최적화 되어 있는 방법은 구글링을 통해 찾아보실 수 있으실 것입니다.
1. 소스 다운로드
- CKEditor : http://ckeditor.com/download
- CKFinder : http://ckfinder.com/download
위의 주소로부터 소스코드를 다운로드 받습니다.
CKFinder는 CKEditor를 통해서 파일(일반 파일, 이미지, 플래쉬 파일)들을 업로드 할 때 사용됩니다. FCKEditor에서는 두 기능이 합쳐졌다고 표현들을 하시는 것을 보았는데 제 생각에는 CKFinder는 보다 기능이 업그레이드 되었고 완전히 다른 기능이라고 생각됩니다. 그리고 CKFinder의 경우 이 문서에서는 PHP 를 사용할 것이므로 위의 다운로드 URL에서 php를 선택하시면 됩니다. (php외에 ASP.net, ASP, ColdFusion을 지원합니다.)
다운로드 받은 소스를 웹에서 접근 가능한 곳에 압축을 풉니다.
본 문서의 경우 http://localhost/phpTest/include/ 아래에 ckeditor와 ckfinder라는 디렉토리 명으로 되어 있습니다.
2. 설정
CKEditor의 경우 별 다른 설정 필요없이 사용하였습니다.
이에 반해 CKEditor는 파일업로드 등의 이유로 경로 및 업로드 파일에 대한 설정을 해 주어야 합니다.
ckfinder/config.php 를 여시면 다음과 같은 php 파일이 나타날 것입니다. (길이상 주석문은 모두 제거해 주었습니다.)
<?php
function CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
// user logs in your system. To be able to use session variables don't
// forget to add session_start() at the top of this file.
// return false;
return true; // false를 true로 변경하여 upload 가능하도록 만듭니다.
// 보안상 true 보다는 주석문에 나타나는 것처럼
// 세션 변수 점검 등으로 true/false를 결정하는 것이 좋을 것입니다.
}
$config['LicenseName'] = '';
$config['LicenseKey'] = '';
// 호스트명을 뺀url 상의 경로입니다.
$baseUrl = '/phpTest/data/upload/';
// 파일 시스템 상의 절대 경로를 나타냅니다.
// $baseDir = resolveUrl($baseUrl);
// 위의 resolveUrl()이라는 메소드를 쓰는 대신 저는 아래와 같이 절대경로를 적어주었습니다.
// 이 경로는 chmod 777 로 잡혀있어야 합니다.
$baseDir = '/home/yoonani/Dropbox/works/phpTest/html/data/upload/';
$config['Thumbnails'] = Array(
'url' => $baseUrl . '_thumbs',
'directory' => $baseDir . '_thumbs',
'enabled' => true,
'directAccess' => false,
'maxWidth' => 100,
'maxHeight' => 100,
'bmpSupported' => false,
'quality' => 80);
$config['RoleSessionVar'] = 'CKFinder_UserRole';
$config['AccessControl'][] = Array(
'role' => '*',
'resourceType' => '*',
'folder' => '/',
'folderView' => true,
'folderCreate' => true,
'folderRename' => true,
'folderDelete' => true,
'fileView' => true,
'fileUpload' => true,
'fileRename' => true,
'fileDelete' => true);
$config['AccessControl'][] = Array(
'role' => '*',
'resourceType' => 'Images',
'folder' => '/Logos',
'folderView' => true,
'folderCreate' => true,
'folderRename' => true,
'folderDelete' => true,
'fileView' => true,
'fileUpload' => false,
'fileRename' => false,
'fileDelete' => false);
$config['DefaultResourceTypes'] = '';
// 업로드될 일반 파일들에 대한 설정입니다.
// url 키에 값으로 $baseUrl .files를
// directory 키에 값으로 $baseDir.files로 설정되어 있는 관계로
// $baseDir에 하위에 files 디렉토리가 있어야 합니다.
// 또한 files는 chmod 777 권한이어야 합니다.
// 이 경로를 바꾸시려면 두 값을 바꾸시면 됩니다.
// maxSize 키 값이 0으로 되어 있는데 이것은 업로드될 파일의 크기를 나타냅니다.
// 여러분들이 원하시는 값으로 나타내실 수 있으며 bytes, K, M, G 등으로 그 크기를 정할 수 있습니다.
// allowExtensions : 업로드 허용가능한 확장자입니다.
// deniedExtensions : 업로드 불가능한 확장자입니다.
$config['ResourceType'][] = Array(
'name' => 'Files', // Single quotes not allowed
'url' => $baseUrl . 'files',
'directory' => $baseDir . 'files',
'maxSize' => 0,
'allowedExtensions' => '7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip',
'deniedExtensions' => '');
//위의 File과 동일하지만 이 곳은 이미지와 관계된 것들입니다.
$config['ResourceType'][] = Array(
'name' => 'Images',
'url' => $baseUrl . 'images',
'directory' => $baseDir . 'images',
'maxSize' => "16M",
'allowedExtensions' => 'bmp,gif,jpeg,jpg,png,avi,iso,mp3',
'deniedExtensions' => '');
// 마찬가지로 위의 File과 동일하지만 플래쉬와 관계된 것들입니다.
$config['ResourceType'][] = Array(
'name' => 'Flash',
'url' => $baseUrl . 'flash',
'directory' => $baseDir . 'flash',
'maxSize' => 0,
'allowedExtensions' => 'swf,flv',
'deniedExtensions' => '');
// 아래는 그냥 기본값으로 두었습니다.
$config['CheckDoubleExtension'] = true;
$config['FilesystemEncoding'] = 'UTF-8';
$config['SecureImageUploads'] = true;
$config['CheckSizeAfterScaling'] = true;
$config['HtmlExtensions'] = array('html', 'htm', 'xml', 'js');
$config['HideFolders'] = Array(".svn", "CVS");
$config['HideFiles'] = Array(".*");
$config['ChmodFiles'] = 0777 ;
$config['ChmodFolders'] = 0755 ;
$config['ForceAscii'] = false;
include_once "plugins/imageresize/plugin.php";
include_once "plugins/fileeditor/plugin.php";
$config['plugin_imageresize']['smallThumb'] = '90x90';
$config['plugin_imageresize']['mediumThumb'] = '120x120';
$config['plugin_imageresize']['largeThumb'] = '180x180';
3. 사용 예제
php 방식으로 사용하는 예제입니다.
경로는 ckeditor, ckfinder는 include 디렉토리의 하위에 있으며 예제 파일들은 include와 같은 경로상에 위치합니다.
먼저 form 생성 파일입니다.
<html>
<head>
<?php
// ckeditor 경로 설정
include_once './include/ckeditor/ckeditor.php';
// ckfinder 경로 설정
include_once './include/ckfinder/ckfinder.php';
// ckEditor 객체 생성
$ckeditor = new CKEditor();
// 경로 지정
$ckeditor->basePath = '/phpTest/include/ckeditor/';
// ckeditor 객체와 ckfinder의 경로를 이용하여 ckfinder를 ckeditor에 포함시킨다.
// 소스코드를 보시면 더욱 자세한 내용을 알 수 있습니다.
CKFinder::SetupCKEditor($ckeditor, '/phpTest/include/ckfinder/');
?>
</head>
<body>
<form name="ckTest" method="POST" action="getCKtest.php">
<?php
// textarea 의 name이 editor1 이 되는 ckEditor를 포함하는 textarea 생성
$ckeditor->editor('editor1');
?>
<input type="submit" />
</form>
</body>
</html>
실행화면입니다.
먼저 웹 브라우저로 전송된 소스코드를 살펴봅시다.
다음과 같이 파란색으로 되어 있는 코드가 생성되었습니다.
| <html> |
| <head> |
| </head> |
| <body> |
| <form name="ckTest" method="POST" action="getCKtest.php"> |
| <textarea name="editor1" rows="8" cols="60"></textarea> |
| <script type="text/javascript">//<![CDATA[ |
| window.CKEDITOR_BASEPATH='/phpTest/include/ckeditor/'; |
| //]]></script> |
| <script type="text/javascript" src="/phpTest/include/ckeditor/ckeditor.js?t=A5AB4B6"></script> |
| <script type="text/javascript">//<![CDATA[ |
| CKEDITOR.replace('editor1', { "filebrowserBrowseUrl": "\/phpTest\/include\/ckfinder\/ckfinder.html", "filebrowserImageBrowseUrl": "\/phpTest\/include\/ckfinder\/ckfinder.html?type=Images", "filebrowserFlashBrowseUrl": "\/phpTest\/include\/ckfinder\/ckfinder.html?type=Flash", "filebrowserUploadUrl": "\/phpTest\/include\/ckfinder\/core\/connector\/php\/connector.php?command=QuickUpload&type=Files", "filebrowserImageUploadUrl": "\/phpTest\/include\/ckfinder\/core\/connector\/php\/connector.php?command=QuickUpload&type=Images", "filebrowserFlashUploadUrl": "\/phpTest\/include\/ckfinder\/core\/connector\/php\/connector.php?command=QuickUpload&type=Flash" }); |
| //]]></script> |
| <input type="submit" /> |
| </form> |
| </body> |
| </html> |
php 코드를 사용하여 위와 같이 웹 페이지 안에 CKEditor를 삽입하였으며 이 코드에 의해 CKFinder 역시 추가되었습니다. 이를 이미지 버튼을 눌러 확인해 보겠습니다.
다음과 같이 보조 창이 뜹니다.
여기서 서버 보기 (Browse Server) 를 클릭해 봅시다.
다음과 같은 판타스틱한 파일 업로드 상자가 나옴을 알 수 있습니다.
여기서 파일을 업로드 하고 업로드한 사진을 클릭하면 ckfinder의 config.php에서 설정한 $baseDir에 _thumnail 이란 디렉토리가 생기고 거기에 지금 보이면 썸네일 사진 또한 같이 저장됩니다.
자 이제 텍스트 상자에 입력을 마치고 서버로 값을 전송하고 그 값을 어떻게 받아오는지 봅시다.
다음은 폼으로부터 값을 전달받아 단순히 화면에 출력시키는 코드입니다.
<?php
$eData = $_POST["editor1"];
?>
<html>
<head>
</head>
<body>
<?php
echo $eData;
?>
</body>
</html>
일반 php에서 폼을 통한 값의 전달시 사용하는 방법을 그대로 따릅니다.
앞선 폼에서 이름을 editor1이라 하였으므로 editor1으로 POST로 전달된 값으로부터 받아와서 그대로 출력합니다.
다음과 같은 결과를 보여줍니다.
아주 기본적인 ckEditor, ckFinder에 대해 알아봤습니다.
제가 계속해서 사용해 보고 더욱 자세한 사항 올리도록 하겠습니다.
감사합니다.
