본문 바로가기
Tip & Tech/CSS & HTML

wysiwyg web editor Ckeditor 설치 및 설정

by 변기환 2011. 4. 5.

Ckeditor는 웹브라우저를 이용하여 글 작성할 때 편리하도록 다양한 도구를 제공하는 웹 편집기다. 진행하고 있는 프로젝트에 웹 편집기를 적용하고자 구글을 검색하여 무료 편집기를 알아본 결과 Ckeditor가  별다른 설정 없이도 한글을 기본으로 지원하고 다른 어떤 편집기보다 기능이 막강하여 설치해 보았다.

설치법
ckeditor 사이트에서 다운로드를 받아 적당한 디렉토리에 업로드 한다.

필자의 경우 Ckeditor을 업로드 한 디렉토리
 /board/ckeditor

Cheditor 편집기를 사용할 페이지 <head></head> 사이에 다음을 추가한다.
<script type="text/javascript" src="/설치경로/ckeditor.js"></script>
필자의 경우 적용한 예 
<script type="text/javascript" src="/board/ckeditor/ckeditor.js"></script>
에디터를 사용 할 textarea에 ID나 CLASS attribute 값을 이용해 적용할 수 있는데, 필자의 경우 기존 게시판을 관리자 설정에 따라 에디터 사용 여부를 결정하고자 ID attribute로 지정하였다.
<textarea id="editor" name="editor"></textarea>
<script type="text/javascript">
//<![CDATA[
   CKEDITOR.replace('editor');
//]]
</script>
위 설정 만으로 ckeditor 편집기를 사용할 수 있다.

다른 스킨 사용법
Ckeditor은 기본적으로 3개의 스킨을 제공하고 있다. 다른 스킨을 사용하고자 할 때는 아래처럼 사용하고자 하는 스킨의 경로를 지정하면 된다.
<script type="text/javascript">
//<![CDATA[
   CKEDITOR.replace('editor',{
     skin:'스킨폴더명';
   });
//]]>
</script>
엔터 모드
엔터나 시프트+엔터를 누를 때의 입력되는 소스를 결정한다.
1 = <p></p>
2 = <br />
3 = <div></div>
<script type="text/javascript">
//<![CDATA[
   CKEDITOR.replace('editor',{
     enterMode:'2',
     shiftEnterMode:'3'
   });
//]]
</script>
툴바 아이콘 출력지정
툴바에 출력할 아이콘을 설정할 수 있다.
<script type="text/javascript"> 
//<![CDATA[
   CKEDITOR.replace('editor',{
     toolbar:[
      ['Bold','-', 'Italic'],
      ['NumberedList']]
   });
//]]
</script>
javascript에서 공백 체크
javascript로 입력값이 공백일 때 체크
if(CKEDITOR.instances.content.getData() == '')
{
   window.alert('내용을 입력해 주세요.');
   CKEDITOR.instances.content.focus();
   return false;
}
Textarea의 넓이와 높이 지정
Textarea의 넓이와 높이를 지정할 수 있다.
<script type="text/javascript">
//<![CDATA[
   CKEDITOR.replace('editor',{
     width:'100%',
     height:'300'
   });
//]]
</script>
필자가 적용한 게시판 예 - 툴바 이이콘을 꼭 필요한 것 만 출력 되도록 설정하였다.

필자가 응용하여 적용한 예 - 홈페이지 내용을 관리자가 Ckeditor 편집기를 이용하여 수정할 수 있도록 관리자 페이지에 적용해 보았다.

Ckeditor은 기본 설정만으로 사용할 수 있으나, 이미지 파일 업로드를 할 수 없어 불편하다.

그러나 업로드 attribute 지정과 업로드 된 파일 처리 부분을 추가하면 이미지 파일 업로드가 가능하다.

이미지 파일업로드 구현
아래와 같이 업로드 된 이미지 파일을 처리할 upload.php를 구현하고 Ckeditor가 설치 된 경로에 업로드한다.

주의 : 파일 이름이 한글이거나 공백이 포함 된 경우 체크하는 부분이 없으므로 실제 사용을 위해서는 추가해 사용하기 바란다.

upload.php 
<?php
$up_url = '/Board/Db/UPimg'; // 기본 업로드 URL
$up_dir = '../Db/UPimg'; // 기본 업로드 폴더

// 업로드 DIALOG 에서 전송된 값
$funcNum = $_GET['CKEditorFuncNum'] ;
$CKEditor = $_GET['CKEditor'] ;
$langCode = $_GET['langCode'] ;

if(isset($_FILES['upload']['tmp_name']))
{
	$file_name = $_FILES['upload']['name'];
	$ext = strtolower(substr($file_name, (strrpos($file_name, '.') + 1)));

	if ('jpg' != $ext && 'jpeg' != $ext && 'gif' != $ext && 'png' != $ext)
	{
		echo '이미지만 가능';
		return false;
    }

	$save_dir = sprintf('%s/%s', $up_dir, $file_name);
	$save_url = sprintf('%s/%s', $up_url, $file_name);

	if (move_uploaded_file($_FILES["upload"]["tmp_name"],$save_dir))
		echo "<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$save_url', '업로드완료');</script>";
}
?>
<script type="text/javascript">
   CKEDITOR.replace('editor',{
      filebrowserImageUploadUrl:"경로/ckeditor/upload.php?type=Images"
   });
</script>

이미지 설정화면에 업로드를 할 수 있는 탭이 추가 되었다.

 또한 Ckfinder를 추가로 설치하면 서버의 특정 폴더를 웹하드처럼 사용할 수 있다. 

저작자표시비영리변경금지

'Tip & Tech > CSS & HTML' 카테고리의 다른 글

구글 캘린더를 블로그나 웹페이지에 끼워 넣기  (0) 2011.06.24
홈페이지를 위한 CSS - 홈페이지에 적용하기  (0) 2011.04.10
홈페이지를 위한 CSS - 기본편  (0) 2011.04.09
wysiwyg web editor Ckeditor 설치 및 설정  (13) 2011.04.05
마우스오버 버튼 만들기  (0) 2010.06.24
아이폰 웹어플리케이션 개발시 꼭 알아야 할 것  (0) 2010.04.17

태그

, ,

관련글

댓글13

티스토리툴바