무료 웹에디터를 찾다가 정말 좋은 걸 찾았다. 하지만 사용법을 몰라 하루를 헤멨다. 하지만 X-Internet에 써야 하기에 또 다시 고민하다가 너무 쉬운곳에서 찾았다.
X-Inertnet 제작사의 지원코너에 최근에 샘플이 올라온 것이다.
또한 네이버 검색에서는 안나왔던 쉬운 설명도 다음 검색에서는 되었다.
아래는 어떤 개발자가 자세한 설명을 달아놓은 부분인데, 나처럼 처음 웹에디터를 접하는 사람에게 쉽게 설명되어 있어 퍼왔다.
출처:
http://sadtear.tistory.com/118?srchid=BR1http%3A%2F%2Fsadtear.tistory.com%2F118CKEditor 다운로드 현재 3.01
http://ckeditor.com/downloadCKFinder 다운로드 현재 1.4.11
http://ckfinder.com/downloadCKEditor는 우리가 게시판에 글작성을 할때 폰트체, 글씨색상등을 바꿀 수 있도록 해주는 에디터이며
CKFinder는 파일관리를 해주는(업로드 다운로드등) 프로그램으로
FCKEditor 시절에는 포함되어서 배포되었지만 지금은 따로 배포되는 것 같다.
우선 CKEditor를 설치한다.
에디터를 사용할 파일에서
<script type="text/javascript" src="ckeditor폴더경로/ckeditor.js">
</script>
를 추가해 준후
<textarea name="memo" id="memo"></textarea>
<script type="text/javascript">
CKEDITOR.replace("memo");
</script>
로 입력해 주면 memo 라는 이름을 사용하는 textarea가 CKEditor로 바뀐다.
여기에 CKFinder를 사용하려면
<script type="text/javascript" src="ckfinder폴더경로/ckfinder.js">
</script>
를 추가해준후
CKEDITOR.replace("memo");
소스를
var editor = CKEDITOR.replace("memo");
CKFinder.SetupCKEditor(editor, '/ckfinder폴더경로/');
로적어준다.
그리고 /ckfinder/config.php 에서
function CheckAuthentication(){
return false;
}
를 return true; 로 변경
return false는 사용을 못함 이므로 사용 가능인 true로 변경
이곳에서Session이나 이런걸로 설정도 가능한 것 같지만 다른파일에서 체크해서 사용하므로 그냥 true로만 바꿨음
$baseUrl = "";
은 업로드(혹은 서버보기) 버튼 클릭 시 나오는 디폴트 경로를 설정할 수 있으며
$config['Thumbnail'] 에서는 썸네일 설정을
$config['RecourceType'] 에 따라 설정을 바꿀 수 있음
개인적으로는 'url' => $baseUrl .'Images', 를 $baseUrl, 로 설정하여 하위 폴더를 사용하지 않고 있음
$config['FilesystemEncoding'] = 'UTF-8'; 일 경우 한글 파일 업로드 오류가 나서 그냥 EUC-KR로 바꿨음
EUC-KR인 경우 썸네일 오류가 나서 추가 수정
/ckfinder/core/connector/php/php5(php4사용자는 php4)/commandHandler/getFiles.php
96번째 줄의 $filename = CKFinder_Connector_Utils_Misc::mbBasename($file); 를
$filename = CKFinder_Connector_Utils_FileSystem::convertToConnectorEncoding(CKFinder_Connector_Utils_Misc::mbBasename($file)); 로 변경
QuickUpload( 업로드 탭에서 바로 업로드)하는 경우 한글 깨짐이 발생하므로 또 추가 수정
/ckfinder/core/connector/php/php5/ErrorHandler/QuickUpload.php
48줄의 $sFileName = $oRegistry->get("FileUpload_fileName"); 를
$sFileName = CKFinder_Connector_Utils_FileSystem::convertToConnectorEncoding( $oRegistry->get("FileUpload_fileName")); 로 바꿔준다.
** 프리 다운로드 버젼은 서버 보기를 하면
This is demo version of CKFinder. 라는 글씨가 뜬다.
이 내용의 경우 hide Message 나 demo version 등 검색을 해도 전혀 안나오길래 결국 직접 찾아냈음
/ckfinder/core/js/ckfinder_ie.js 파일의
45번째 줄을 보면
qo+='\75\x27\x3C\144\x69\166\x20\163\x74\x79\x6C\145\75\x22\x74\145\170\x74\55\x61\154\151\x67\156\x3A\40\143\145\156\x74\x65\x72\73\40\146\157\x6E\x74\x2D\x73\151\172\x65\x3A\x20\61\x36\160\170\x3B\x20\143\x6F\154\157\162\x3A\x20\x52\x65\x64\x3B\40\x70\141\x64\x64\x69\156\147\72\40\61\60\160\x78\73\40\x66\x6F\156\x74\x2D\x77\145\151\147\x68\164\x3A\40\142\157\x6C\x64\x22\76\x54\150\x69\163\x20\x69\x73\40\x74\150\145\x20\144\145\x6D\157\40\166\145\x72\163\x69\x6F\x6E\40\x6F\146\40\103\113\106\151\x6E\x64\145\x72\x2E\40\74\x61\x20\x68\162\145\x66\x3D\x22\x68\x74\164\x70\72\x2F\57\x77\167\x77\56\143\153\x66\x69\156\x64\x65\x72\56\x63\x6F\155\42\40\164\141\162\x67\x65\164\x3D\42\x5F\x62\x6C\x61\156\x6B\x22\40\163\164\171\x6C\145\75\42\x63\x6F\x6C\x6F\x72\72\40\102\154\x75\x65\42\x3E\103\x6C\151\143\x6B\x20\150\145\162\145\40\x74\157\40\x76\x69\x73\x69\x74\x20\x6F\165\162\x20\x77\x65\x62\40\163\151\164\145\74\57\141\76\x2E\40\x3C\151\x6E\160\x75\x74\40\x74\x79\160\x65\x3D\x22\142\x75\x74\x74\x6F\x6E\42\40\x76\141\154\x75\145\x3D\x22\x48\151\x64\145\x20\x4D\x65\x73\x73\x61\147\x65\x22\40\157\x6E\143\x6C\x69\x63\x6B\x3D\42\164\150\151\x73\56\160\x61\x72\145\x6E\164\x4E\157\144\145\x2E\x70\x61\162\x65\x6E\x74\x4E\x6F\x64\x65\56\x73\x74\x79\154\145\x2E\x64\x69\163\160\x6C\x61\x79\75\134\x27\156\157\156\x65\134\x27\73\x22\x20\x2F\x3E\74\x2F\144\x69\166\76\x27\73';
라고 엄청 긴 부분이 있다.
간단하게
html 파일같은거 만들어서
alert('\75\x27\x3C\144\x69\166\x20\163\x74\x79\x6C\145\75\x22\x74\145\170\x74\55\x61\154\151\x67\156\x3A\40\143\145\156\x74\x65\x72\73\40\146\157\x6E\x74\x2D\x73\151\172\x65\x3A\x20\61\x36\160\170\x3B\x20\143\x6F\154\157\162\x3A\x20\x52\x65\x64\x3B\40\x70\141\x64\x64\x69\156\147\72\40\61\60\160\x78\73\40\x66\x6F\156\x74\x2D\x77\145\151\147\x68\164\x3A\40\142\157\x6C\x64\x22\76\x54\150\x69\163\x20\x69\x73\40\x74\150\145\x20\144\145\x6D\157\40\166\145\x72\163\x69\x6F\x6E\40\x6F\146\40\103\113\106\151\x6E\x64\145\x72\x2E\40\74\x61\x20\x68\162\145\x66\x3D\x22\x68\x74\164\x70\72\x2F\57\x77\167\x77\56\143\153\x66\x69\156\x64\x65\x72\56\x63\x6F\155\42\40\164\141\162\x67\x65\164\x3D\42\x5F\x62\x6C\x61\156\x6B\x22\40\163\164\171\x6C\145\75\42\x63\x6F\x6C\x6F\x72\72\40\102\154\x75\x65\42\x3E\103\x6C\151\143\x6B\x20\150\145\162\145\40\x74\157\40\x76\x69\x73\x69\x74\x20\x6F\165\162\x20\x77\x65\x62\40\163\151\164\145\74\57\141\76\x2E\40\x3C\151\x6E\160\x75\x74\40\x74\x79\160\x65\x3D\x22\142\x75\x74\x74\x6F\x6E\42\40\x76\141\154\x75\145\x3D\x22\x48\151\x64\145\x20\x4D\x65\x73\x73\x61\147\x65\x22\40\157\x6E\143\x6C\x69\x63\x6B\x3D\42\164\150\151\x73\56\160\x61\x72\145\x6E\164\x4E\157\144\145\x2E\x70\x61\162\x65\x6E\x74\x4E\x6F\x64\x65\56\x73\x74\x79\154\145\x2E\x64\x69\163\160\x6C\x61\x79\75\134\x27\156\157\156\x65\134\x27\73\x22\x20\x2F\x3E\74\x2F\144\x69\166\76\x27\73');
해보세요 어떤 소스인지 번역되서 나옵니다.
우선 현재까지 이렇게 작업했음!!