CKEditor 4 설치와 PHP 연동 하기

프로그래밍/자바스크립트 2018. 4. 19. 22:15

웹에서 사용하는 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


댓글을 달아 주세요

  • 월야 2019.01.29 20:30  댓글주소  수정/삭제  댓글쓰기

    정말 많은 도움이 되었습니다.
    감사드립니다.

    다만 글을쓰고 수정할때마다 br 태그가 계속 두배로 추가되던데
    이 문제를 해결중입니다 ㅜ
    혹시 같은 문제 해결해보신적 있으신지 여쭙습니다 !

    • pentode 2019.01.30 23:09 신고  댓글주소  수정/삭제

      안녕하세요. 테스트를 해보았는데, 수정해도 <br> 이 붙지는 않았습니다. 내용을 출력하는 곳에 개행문자를 <br> 태그로 바꾸는 코드가 있는게 아닐까요? HTML 에디터를 사용하기 전에는 그런 코드를 넣어서 줄 바꿈을 했을 수도 있을것 같습니다.

  • 나그네 2019.03.18 17:42  댓글주소  수정/삭제  댓글쓰기

    감사 합니다.
    회사에서 위그윅 게시판으로 변경하라는 압박을 받던중 설치에 어려움에 애먹고 있었는데 소스첨부까지 단비와도 같은 친절함이였습니다.

    최종적으로 게시판에 적용을 마무리 하였습니다.

    한가지 궁금한것은
    소스에서 보여준 config.js 파일대로 수정하려고 보니 받은 config.js파일과 내용이 완전히 달라서 좀 당황했습니다.
    그래서 ckeditor 사이트에서 받은 소스를 삭제하고 그냥 첨부해 주신 소스로 바꿨습니다.
    지금은 적용해서 문제는 없지만 담에라도 혹시 받게 될 경우

    config.js 파일의 하단에 아래 내용을 통채로 삽인하면 되는건지 궁금해 지더군요..
    config.filebrowserUploadUrl = '/editor/upload.php';

    • pentode 2019.03.18 23:08 신고  댓글주소  수정/삭제

      안녕하세요. 도움이 되었다니 다행입니다.^^ 방금 ckeditor 4 full package 를 받아서 config.js 를 확인해 보니 별로 다른게 없었습니다. 혹시 build-config.js 파일을 열어 본게 아닌가요? 설정 파일은 config.js 파일 입니다. 필요한 설정을 config.js 안에 두면 모든 게시판에 공통적으로 적용되고, 게시판 마다 별도로 적용하려면 글쓰기 페이지에서 ckeditor 를 생성하는 코드에 개별적으로 설정할 수 있습니다.

      <script type="text/javascript">
      CKEDITOR.config.allowedContent = true;
      CKEDITOR.replace('contents',{
      filebrowserUploadUrl:'/editor/upload.php'
      });
      </script>

  • dkfldkfl 2019.03.22 18:24  댓글주소  수정/삭제  댓글쓰기

    혹시 이미지를 복붙으로 집어넣은경우 처리방법 아시나요

    cloudservice 이용해서 토큰으로 임시저장하고

    폼전송시 업로드 되는 방식인것같은데. 혹시 아시나요

    • pentode 2019.03.22 22:32 신고  댓글주소  수정/삭제

      CKEditor 4.5 부터 이미지의 붙여넣기와 드래그 앤 드롭을 지원한다고 합니다. 사용해 보지는 않아서 자세한 내용을 알려드릴 수는 없네요. 다음 URL을 참조 하세요.

      https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html

  • 나그네 2019.03.28 12:04  댓글주소  수정/삭제  댓글쓰기

    잘 설치 했는데요..
    제가 크롬브라우저에서만 작동이 되는데 익스플로어에서는 작동이 안되나요?(현재 익스11버전)
    반쪽짜리라면 정말 쓸 수 없는 사항이라 설마 그럴 것 같지는 않는데 궁금합니다.

    • pentode 2019.03.28 20:55 신고  댓글주소  수정/삭제

      IE11 에서도 잘 동작합니다. F12키를 눌러서 스크립트 오류가 없는지 Console을 확인해보시는게 좋을 것 같습니다.

      아니면 페이지 상단에 <!DOCTYPE html> 을 추가 해 보세요.

      현재 에뮬레이션 모드 도 확인해 보시고, 다음 메타태그도 사용해보세요.
      <meta http-equiv="X-UA-Compatible" content="IE=edge">

  • 구름따라 2019.04.02 16:54  댓글주소  수정/삭제  댓글쓰기

    앞전에 리플을 달았었는데요..

    소스에서 보여준 config.js 파일 수정하려고 보니 받은 config.js파일과 내용이 달라서 문의했던 사람입니다.

    제가 풀패키지 받아 보니
    아래와 같이 함수에 모두 주석외에 아무 내용이 없더군요..

    CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    };

    그런데 님 소스에 보면 그 안에

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

    config.filebrowserUploadUrl = '/ans/upload.php';
    -----------------------------------------
    이런식으로 변수가 정의 되어 있었는데
    config.filebrowserUploadUrl 이런 변수명을 config.UploadUrl 이런식으로 아무렇게나 쓸 수는 없잖아요..
    제가 추가 해 줄 변수명들을 어떻게 알 수 있나요?

    예를 들어 색을 바꿔 주고 싶다 해서 config.color="red"; 이렇게 쓴다면 적용이 되지 않기 때문에요..
    해당 변수명 들을 어디서 확인 할 수 있는지 궁금합니다.


    한가지만 더 여쭈어 본다면 다운 받은 파일에는 config.filebrowserUploadUrl 이 변수가 없었는데 없어도 구동이 되는지 아니면 반드시 만들어야 할 변수 인지 궁금합니다. 패키지들 전부 다운 받아 봤는데 해당 변수가 없더라구요..

    • pentode 2019.04.03 12:45 신고  댓글주소  수정/삭제

      설정에 사용할 수 있는 값들은 필요할때 인터넷 검색으로 찾은 것들입니다. 그냥 얻어지는게 없죠.T.T

      ckeditor 사이트에 Document와 API 문서가 제공되고 있습니다. 당연히 제공되는 설정만 동작을 합니다.

      API 문서 주소 입니다. https://ckeditor.com/docs/ckeditor4/latest/api/index.html 저기에서 config 부분을 찾아 보시면 사용할 수 있는 설정값들이 모두 나옵니다.

  • 구름따라 2019.04.05 09:53  댓글주소  수정/삭제  댓글쓰기

    심각한 오류로 보이는데 설정문제인지 궁금합니다.

    이미지 등록할때 과거에 "텐트"라는 파일로 올린 경우가 있을때 현재의 등록할 이름도 "텐트"일경우 현재 이미지를 보여 주지 않고 과거에 올렸던 "텐트"이미지를 그대로 불러오더군요..

    만약 캠핑 관련 게시판이라면 "텐트"라는 이름으로 많이 올릴텐데 게시판 사용을 할 수 없게 되겠죠

    잘못설치 된건가요? 이미지 저장된 곳에 들어가 보니 전혀 알수 없는 파일명으로 인코딩이 되어 있던데 궁금합니다.

    • pentode 2019.04.05 12:00 신고  댓글주소  수정/삭제

      이 글에 첨부되어 있는 소스는 CKEditor 사용법을 보여주기 위한 기본 기능만을 구현해둔 것입니다. 실제 업무에 사용하기 위해서는 더욱 많은 오류관련, 보안 관련 체크 코드들이 필요합니다.

      업로드된 파일이 저장된 파일명은 본문 소스의 주석에도 나와 있듯이 파일이름 중복처리를 하지 않고 있기 때문에 같은 이름의 파일이 업로드될 경우는 직접 구현을 하셔야 합니다. 다음 글을 참고해 보세요.

      https://offbyone.tistory.com/279

      이 블로그에서 제공하는 소스는 어디까지나 참고용입니다. 실제 업무에서 업무 및 요구사항에 맞게 수정을 해서 사용하셔야 합니다.

  • 지나거던 뉴비 2020.06.04 17:43  댓글주소  수정/삭제  댓글쓰기

    ckeditor 높은버전 사용하시는 분들은 마지막에 자바스크립트가 아니라 json형태로 보내야 이미지 업로드가 됩니다!

    • pentode 2020.06.06 23:48 신고  댓글주소  수정/삭제

      json 방식으로 업로드 처리하는 것은 다음 글을 참고해 주세요.

      https://offbyone.tistory.com/374

      방문해 주셔서 감사합니다.^^