[php] CKeditor 설정 및 적용

2020.11.22 18:24

졸리운_곰 조회 수:29

 

CKeditor 설정 및 적용

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)

– 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)

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

config.height = 400;

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

config.toolbarCanCollapse = true;

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

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

폰트는 세미콜론(;) 으로 구분되고 “선택 상자에 보여질 이름 / 콤마로 분리된 폰트명들” 로 구성됩니다. 예로 ‘Arial/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에 업로드된 이미지를 표시합니다.

 

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

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

 

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

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

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

※ 참고사항

에디터에서 엔터키를 치면

태그가 삽입이 됩니다. 새 paragraph 를 생성하는 것입니다. 기본적으로 태그간의 간격이 넓기 때문에  태그를 이용한 줄바꾸기를 원할 때가 있습니다.

“Shift + Enter” 키를 누르면 이 삽입 됩니다.

 

[출처] https://www.gldigital.co.kr/php/ckeditor-%EC%84%A4%EC%A0%95-%EB%B0%8F-%EC%A0%81%EC%9A%A9

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
138 PHP 카운터 만들기-[1] 졸리운_곰 2022.07.20 3
137 PHP로 카운터 만들기 졸리운_곰 2022.07.20 0
136 How To Build A Rest API Using PHP file 졸리운_곰 2022.07.15 1
135 PHP REST API Authentication Using JWT file 졸리운_곰 2022.07.15 0
134 [PHP] JWT 구현하기 졸리운_곰 2022.07.15 2
133 [php] Coppermine PHP로 제작된 "웹 갤러리" 프로그램임. 상당히 잘 만들어진 것같아 졸리운_곰 2021.07.04 22
132 [php] imagick php 7.3 windows 설치하기 졸리운_곰 2021.07.04 10
131 [php] simple Rest API : Build a Simple REST API in PHP file 졸리운_곰 2021.05.31 15
130 [php][php 수학][php 수치해석] MathPHP - Powerful Modern Math Library for PHP file 졸리운_곰 2021.05.03 12
129 [Redis] php 세션 저장소를 redis 로 바꾸어 본 후기. file 졸리운_곰 2021.04.11 18
128 Creating a Website Design Templating System Using PHP 졸리운_곰 2021.02.13 17
127 Build a CRUD Operation using PHP & MongoBD 졸리운_곰 2021.01.04 20
126 CRUD Operation using PHP & Mongodb file 졸리운_곰 2021.01.04 23
125 PHP and MongoDB Connection file 졸리운_곰 2021.01.04 56
124 PHP 기반의 Micro Frameworks 정리 졸리운_곰 2020.12.02 32
123 CKEditor 4 설치와 PHP 연동 하기 file 졸리운_곰 2020.11.22 33
» [php] CKeditor 설정 및 적용 졸리운_곰 2020.11.22 29
121 [PHP]Fuelframework 설치 및 시작 방법(window10,xampp) file 졸리운_곰 2020.10.01 31
120 Building a Simple Blog App with MongoDB and PHP file 졸리운_곰 2020.09.13 44
119 웹 설문조사 시스템 & 설문조사를 잘 하는 방법 file 졸리운_곰 2020.09.10 88
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED