티스토리 뷰

DEVELOPE/PHP

CKEditor4 PHP 간단설치법 (easy install)

소찾나 2018. 2. 13. 17:24
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

CKEditor4 PHP 간단설치법 (easy install)

CKEditor4 PHP 간단설치법 (easy install)

CKEditor4 PHP 간단설치법 (easy install)



www 웹에서 게시판 또는 방명록뿐 아니라 여러가지 글 작성을 하게될 폼을 이용한다 .


글작성시 폼은 간단하게 처리할 수도 있지만 에디터 기능을 넣으면 사용자에게 간편하게


디자인적 요소나 색상 등 디자인이나 프로그램을 다루지 못하더라도 쉽게 편집할 수 있게


해주는 아주 유용한 프로그램이다


우선 설치방법부터 확인하자.


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



CKEditor4 PHP 간단설치법 (easy install)


다운로드 페이지에 접속하면 최신버젼이 ckeditor 4 버젼이고 


4가지의 페키지중 본인에게 맞는것을 골라 설치하면 되겠다.


우선 풀 페키지를 다운로드 받아 설치하는 방법을 알아보도록 하자


CKEditor4 PHP 간단설치법 (easy install)




다운받은 파일은 필요한 웹폴더에 업로드한다.


1
2
3
4
5
6
7
8
9
10
<html>
<head>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form name="ckeditor" method="post" action="">
<textarea class="ckeditor" cols="1" id="editor1" name="contents" rows="15"><?=$row[contents]?></textarea>
<input type="button" name="전송" value="전송">
</form>
</body>
cs



업로드된 에디터 폴더의 jquery 경로를 스크립트로 호출하고


textarea 테그의 name 명을  contents 로 불러와 처리하면 된다.


위 소스대로 처리한 결과화면이다


CKEditor4 PHP 간단설치법 (easy install)



쉽게 에디터 기능을 구현하였고 contents 값을 사용하여 데이터 처리하면 된다.


초기 setting 에서는 파일 upload 기능은 빠진 상태이지만 


몇가지 간단한 설정및 php 파일을 생성하여 주면 파일 업로드 기능도 구현


할 수 있다.



1 js 파일 수정 config.js


1
2
3
4
5
6
7
8
9
10
11
12
/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */
 
CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.filebrowserUploadUrl = 'upload.php';
 
};
cs


마지막줄 upload.php 의 경로를 설정해 주어야 한다.



2 upload.php 파일 생성


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
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php 
// 이미지가 업로드될 폴더의 전체 경로입니다. 
// 여기서는 구현을 간단히 하기 위해서 웹 루트 안에 업로드합니다. 
$uploadfullPath = "/adminbbs/images/"; 
 
// 이미지가 웹에서 보여질때 사용되어질 기본 URL입니다.
// 웹루트 부터의 절대 URL을 입력합니다.
$imageBaseUrl = "/adminbbs/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) or die("파일 업로드에 실패하였습니다.");
 
    // 업로드후 이미지를 보여줄 URL 을 만듭니다.
    $url = $imageBaseUrl . $name ;
    
} else {
    $message = '업로드된 파일이 없습니다.';
}
 
// 이미지 업로드는 iframe을 사용해서 처리되므로 parent 와 통신하기 위해서
// 자바스크립트를 사용합니다.
echo "<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message')</script>";
 
?>
cs


3 업로드 탭이 생성됨


CKEditor4 PHP 간단설치법 (easy install)


'DEVELOPE > PHP' 카테고리의 다른 글

PHP 문자추출 정규표현식 정리  (0) 2018.02.05
php url 파싱 스누피  (0) 2018.01.16
PHP getimagesize() 이미지 사이즈 구하기  (0) 2018.01.11
PHP mysql_fetch_row, assoc, array 구분 사용법  (1) 2017.10.23
PHP foreach 사용법  (0) 2017.10.23
공유하기 링크
댓글