“웹 게시판 등에 사용하는 오픈소스 HTML 에디터 CKEditor 의 설치 방법입니다.”
CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It’s a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor.
바로가기 : http://ckeditor.com/
1. CKEditor 다운로드 및 서버 업로드
1) http://ckeditor.com/download 에서 Full Package 선택하고 Download 클릭 합니다. (2016. 02. 12. 기준 버전 4.5.7 다운로드)
2) zip 파일을 압축해제 후 하위에 있는 ckeditor 폴더를 서버에 업로드 합니다.
2. CKEditor 설치
1) 설치하고자 하는 페이지의 <head></head> 태그 사이에 다음 소스를 추가합니다.
PHP
1
2
3
4 |
<head>
...
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head> |
2-1) class 를 이용한 에디터 추가.
PHP
| 1 |
<textarea rows="10" class="ckeditor" name="contents"></textarea> |
2-2) ID 를 이용한 에디터 추가.
PHP
1
2
3
4 |
<textarea id="contents" name="contents"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'contents' );
</script> |
* ckeditor 설치가 완료 되었습니다. *
3. 설정변경
1) 툴바 변경 (필요한 최소한의 아이콘으로 재구성)
– 에디터 입력부 아래와 같이 수정
PHP
1
2
3
4
5
6
7
8 |
<textarea id="contents" name="contents"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'contents',{
customConfig : '/ckeditor/config.js',
width: '100%',
height: 250
});
</script> |
– config.js 아래와 같이 수정
(http://주소/ckeditor/samples 에 접속후 Toolbar Configurator 통해서 아래 파일 생성가능)
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'document', 'mode', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'tools', groups: [ 'tools' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Save,NewPage,Preview,Print,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,SelectAll,Scayt,About,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,BidiLtr,BidiRtl,Flash,PageBreak,Iframe,Language,Format,Smiley,Replace,Subscript,Anchor';
}; |
4. CodeMirror 플러그인 설치
1) CodeMirror 플러그인은 (Source) Syntax Highlighting 역할을 하는 플러그인으로 웹페이지에 소스코드, 스크립트 등을 자주 등록하는 사용자에게 유용합니다.
2) http://ckeditor.com/addon/codemirror 에서 다운로드하여 서버의 /ckeditor/plugins/ 폴더 아래 압축 해제하여 업로드.
3) CKEditor 의 설정파일 config.js 에 다음설정 추가
JavaScript
1
2 |
.. 생략
config.extraPlugins = 'codemirror'; |
그런데 설치하고 보니 제가 사용하는 스타일과 다릅니다. 다른 Syntax Highlight 플러그인을 설치해야 겠습니다.
5. icy_orange 스킨설정
1) http://ckeditor.com/addon/icyorange 에서 다운로드하여 서버의 /ckeditor/skins/폴더 아래 압축 해제하여 업로드
2)?CKEditor 의 설정파일 config.js 에 다음설정 추가
JavaScript
1
2 |
.. 생략
config.skin = 'icy_orange'; |
6. 이미지 업로드기능(PHP) 추가
업로드 참조 : http://www.spacek.xyz/mle/?p=284
1) /files/images 폴더를 서버에 생성하고 권한을 777 로 변경합니다.
2) 위에서 생성한 /files 폴더에 다음 upload.php 파일을 업로드 합니다.
upload.php
Shell
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 |
<?php
if ($_FILES["upload"]["size"] > 0 ){
// 현재시간 추출
$date_filedir = date("YmdHis");
//오리지널 파일 이름.확장자
$ext = substr(strrchr($_FILES["upload"]["name"],"."),1);
$ext = strtolower($ext);
$savefilename = $date_filedir."_".str_replace(" ", "_", $_FILES["upload"]["name"]);
$uploadpath = $_SERVER['DOCUMENT_ROOT']."/files/images";
$uploadsrc = $_SERVER['HTTP_HOST']."/files/images/";
$http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS']=='on') ? 's' : '') . '://';
//php 파일업로드하는 부분
if($ext=="jpg" or $ext=="gif" or $ext =="png"){
if(move_uploaded_file($_FILES['upload']['tmp_name'],$uploadpath."/".iconv("UTF-8","EUC-KR",$savefilename))){
$uploadfile = $savefilename;
echo "<script type='text/javascript'>alert('업로드성공: ".$savefilename."');</script>;";
}
}else{
echo "<script type='text/javascript'>alert('jpg,gif,png파일만 업로드가능합니다.');</script>;";
}
}else{
exit;
}
echo "<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction({$_GET['CKEditorFuncNum']}, '".$http.$uploadsrc."$uploadfile');</script>;";
?> |
3) CKEditor 의 설정파일 config.js 에 다음을 추가 합니다.
JavaScript
| 1 |
config.filebrowserUploadUrl = '/files/upload.php' |
4) 이미지 아이콘을 클릭하면 업로드 탭이 생성되어 있어 업로드 가능합니다. |
|
2830
41
