본문 바로가기
프로그래밍/자바스크립트

CKEditor 4 설치와 PHP 연동 하기

by pentode 2018. 4. 19.

웹에서 사용하는 HTML에디터로써 많이 사용되고 있는 CKEditor를 설치하고 PHP로 사용하는 방법을 알아봅니다. 오랜만에 CKEditor 웹사이트에 들어가보니 CKEditor 5가 나오고 단순 웹에디터가 아니라 전문 텍스트 편집을 위한 프레임웍으로 사업 영역을 넓혀가고 있는 모습이었습니다. 하지만 거기까지는 필요 없으므로 이글에서는 CKEditor 4를 설치해 봅니다. CKEditor는 GPL, LGPL, MPL 의 세 가지 오픈소스 라이센스 중 선택해서 사용할 수 있고, 커머셜 버전도 있습니다. 전체 예제 소스는 글 아래 첨부 되어 있습니다.



1. 다음 URL에서 CKEditor 4 풀 버전을 다운로드 받습니다. 자신이 기능을 선택해서 다운받는 옵션도 있지만, 일단 풀 버전을 다운로드 받은 다음에 메뉴를 커스터마이즈 해서 사용하는게 편할것 같습니다.


https://ckeditor.com/ckeditor-4/download/





2. 압축을  풀면 ckeditor 폴더에 모든 파일들이 들어 있습니다. 개발용 웹사이트를 만들고 웹루트 아래 적당한 곳에 옮겨 둡니다.


- 여기서는 /editor/ckeditor  폴더를 만들었습니다. 

- images 폴더는 CKEditor 에서 업로드한 이미지가 저장될 폴더 입니다.

- editor.php 파일은 CKEditor 로 글을 작성할 폼 페이지입니다.

- upload.php 파일은 이미지 업로드 처리를 하는 파일 입니다.





3. 에디터를 사용하는 웹페이지를 만듭니다. (/editor/editor.php)


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>CKEditor 4 설치하기</title>
<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
<script type="text/javascript">
//<![CDATA[
function LoadPage() {
    CKEDITOR.replace('contents');
}

function FormSubmit(f) {
    CKEDITOR.instances.contents.updateElement();
    if(f.contents.value == "") {
        alert("내용을 입력해 주세요.");
        return false;
    }
    alert(f.contents.value);
    
    // 전송은 하지 않습니다.
    return false;
}
//]]>
</script>
</head>
<body onload="LoadPage();">
<form id="EditorForm" name="EditorForm" onsubmit="return FormSubmit(this);">
<div>
    <label for="title">제목</label>
    <input type="text" id="title" name="title" size="40" />
</div>
<div>
    <label for="contents">내용</label>
    <textarea id="contents" name="contents"></textarea>
</div>
<div><input type="submit" value="전송"></div>
</form>
</body>
</html>


- id 가 "contents"인 <textarea>를 사용해서 에디터를 생성합니다.


<textarea id="contents" name="contents"></textarea>


꼭 <textarea> 여야 하는 것은 아닙니다. <div> 태그 등도 사용가능합니다. 하지만 폼 데이터를 나중에 전송처리하기 편리하므로 <textarea>를 사용합니다.


- ckeditor 폴더 내에 있는 ckeditor.js 파일을 포함합니다.


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


- CKEditor 를 생성합니다.


CKEDITOR.replace('contents');


위의 <textarea>가  가지는 id 값을 인자로 주어서 생성합니다. DOM이 생성되어 있어야 하므로 여기서는 <body> 태그의  onload 이벤트에서 호출합니다. 그외에서 jQuery를 사용한다면 $(document).ready(); 를 사용하거나, <textarea> 태그 뒤쪽에서 <script> 태그를 이용해서 호출 하는 방법이 있습니다.


- 폼 submit 시 에디터의 내용을 <textarea> 로 넣어 주는 코드를 작성합니다. 에디터로 작성한 글이 에디터 생성의 타겟이었던 <textarea> 에 들어가 있지는 않습니다. 그러므로 <textarea> 로 작성한 내용을 넣어주는 작업이 필요합니다.


CKEDITOR.instances.contents.updateElement();



4. CKEditor 설정 파일을 수정합니다.(/editor/ckeditor/config.js)


CKEDITOR.editorConfig = function( config ) {
    config.height = 400;
    config.toolbarCanCollapse = true;
    config.font_names = '맑은 고딕/Malgun Gothic;굴림/Gulim;돋움/Dotum;바탕/Batang;궁서/Gungsuh;' + config.font_names;
    config.filebrowserUploadUrl = '/editor/upload.php';
};


- 에디터의 높이를 지정합니다.


config.height = 400;


- 에이터 상단의 툴바를 접을 수 있는 기능을 활성화 합니다.


config.toolbarCanCollapse = true;


- 폰트 선택상자에 한글 폰트를 추가합니다.


config.font_names = '맑은 고딕/Malgun Gothic;굴림/Gulim;돋움/Dotum;바탕/Batang;궁서/Gungsuh;' + config.font_names;


폰트는 세미콜론(;) 으로 구분되고 "선택 상자에 보여질 이름 / 콤마로 분리된 폰트명들" 로 구성됩니다. 예로 'Arial/Arial, Helvetica, sans-serif;'로된 것을 선택했다면 <span style="font-family:Arial, Helvetica, sans-serif"> 로 태그가 생성됩니다.


- 이미지 업로드 URL 을 지정합니다.


config.filebrowserUploadUrl = '/editor/upload.php';


기본 설치시 이미지 업로드 창에서 이미지를 선택해서 서버로 업로드하는 탭이 없습니다. 이 설정을 넣어주면 업로드 탭이 생성됩니다.





5. 이미지 업로드 처리하기


- config.js 파일에서 config.filebrowserUploadUrl 를 지정하면 이미지 업로드 창에 서버로 업로드 탭이 생성됩니다. 이 기능은 선택된 이미지 파일을 iframe 을 타겟으로 해서 서버로 업로드합니다.




- 에디터가 이미지 업로드시 전달하는 정보는 다음과 같습니다.


http://localhost:8080/editor/upload.php?CKEditor=contents&CKEditorFuncNum=1&langCode=ko


- GET 방식으로 CKEditor, CKEditorFuncNum, langCode 를 전달합니다.

- POST 방식으로 "upload" 를 키로 파일 데이터를 전달 합니다.


- 서버측 프로그램에서는 업로드가 성공하면 자바스크립트를 출력해서 CKEditor에 업로드된 이미지를 표시합니다.


<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction(1, '/editor/images/011-php-json-01.png', '')</script>



6. 서버측 이미지 업로드 프로그램입니다. (/editor/upload.php)


- 코드에 대한 설명은 주석을 참고하세요. 

<?php
// 이미지가 업로드될 폴더의 전체 경로입니다.
// 여기서는 구현을 간단히 하기 위해서 웹 루트 안에 업로드합니다.
$uploadfullPath = "D:/workspace/project_editor/application/editor/images/";

// 이미지가 웹에서 보여질때 사용되어질 기본 URL입니다.
// 웹루트 부터의 절대 URL을 입력합니다.
$imageBaseUrl = "/editor/images/";

// 에디터가 만들어진 textarea의 id 값이 넘어옵니다.
$CKEditor = $_GET['CKEditor'] ;

// 이미지 업로드 후 에디터 내에 이미지를 표시하는데 사용되는 값입니다.
// CKEditor의 addFunction으로 추가된 함수를 호출하기 위한 키값입니다.
$funcNum = $_GET['CKEditorFuncNum'] ;

// 브라우저의 언어코드가 넘어옵니다. (ko)
// 필요하다면 파일명 엔코딩 등에 사용되어질 수 있습니다.
$langCode = $_GET['langCode'] ;

// 업로드후 이미지를보여줄 이미지 url
$url = '' ;

// 에러가 발생하면 메세지를 보여줍니다.
$message = '';

// CKEditor에서 이미지 업로드는 파일 키값으로 upload를 사용합니다.
if (isset($_FILES['upload'])) {

    $name = $_FILES['upload']['name'];
    
    // 파일 이름 중복 체크는 없습니다.(실제 구현에는 직접 작성해야 할 것입니다.)
    move_uploaded_file($_FILES["upload"]["tmp_name"], $uploadfullPath . $name);
    
    // 업로드후 이미지를 보여줄 URL 을 만듭니다.
    $url = $imageBaseUrl . $name ;
    
} else {
    $message = '업로드된 파일이 없습니다.';
}

// 이미지 업로드는 iframe을 사용해서 처리되므로 parent 와 통신하기 위해서
// 자바스크립트를 사용합니다.
echo "<script type='text/javascript'>; window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message')</script>";

?>



7. 에디터의 메뉴를 사용자 정의하는 방법입니다.


- /editor/ckeditor/samples/toolbarconfigurator/index.html 에 메뉴를 설정할 수 있는 프로그램이 포함되어 있습니다.




- 보여주지 않을 버튼을 체크해제하고 "Get toolbar config" 버튼을 눌러 설정을 생성한후 config.js 파일에 복사해 넣으면 됩니다.



※ 참고사항

에디터에서 엔터키를 치면 <p> 태그가 삽입이 됩니다. 새 paragraph 를 생성하는 것입니다. 기본적으로 <p> 태그간의 간격이 넓기 때문에 <br/> 태그를 이용한 줄바꾸기를 원할 때가 있습니다. "Shift + Enter" 키를 누르면 <br/> 이 삽입 됩니다.


※ 전체 예제 소스

editor.zip


반응형
저작자표시

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

jQuery .load() 메소드 - 페이지 내용 동적 교체  (0) 2018.04.20
jQuery UI datepicker - 자바스크립트 달력 사용하기  (2) 2018.04.20
jQuery 무한 스크롤(Infinite scroll) 플러그인 jScroll 사용법  (0) 2018.04.19
다음 지도로 약도 만들기  (2) 2018.04.19
자바스크립트 정규식 객체와 자주 쓰이는 함수  (0) 2018.04.17

티스토리툴바