5. ckeditor Custom config.

5. ckeditor Custom config.

 

전체 CKEditor에 적용되길 원하는 설정이라면 config.js 파일에 직접 설정을 하지만 각각의 Editor마다 다른 설정을 갖도록 하려면 javascript 방식으로 선언하는 방법이 있다.

 

-스킨

 

<script type="text/javascript">

CKEDITOR.replace( 'editor1',{

skin:'스킨명'

});

</script>

 

-인터페이스 컬러

CKEditor 기본스킨을 사용할 때 Editor의 UI 컬러를 설정할 수 있다.

 

<script type="text/javascript">

CKEDITOR.replace( 'editor1',{ uiColor: '#FFFFFF'} );

</script>

 

UI색상의 경우는 툴바에서 UIcolor라는 버튼을 만들 경우 색상을 직접 선택할 수 있도록 하는

Color Chooser를 통해서 더욱 다양한 색상을 지정할 수도 있다.

 

-언어

CKEditor는 기본적으로 페이지의 언어에 맞춰 설정해 주지만 그렇지 않은 경우

아래와 같이 직접 설정할 수도 있다.

 

<script type="text/javascript">

CKEDITOR.replace('editor2',{ language : 'english' });

</script>

 

-엔터 모드

Enter나 Shift+Enter를 누를 때 입력되는 소스를 결정합니다.

 

1 =<p></p>

2 = <br />

3 =<div></div>

 

<script type="text/javascript">

CKEDITOR.replace( 'editor1',{

enterMode:'2'

shiftEnterMode:'3'

});

</script>

 

-툴바

툴바에 버튼을 지정할 때 ‘-‘ 또는 [ 와 ] 로 버튼 사이에 공백을 줄 수 있다.

‘/’를 사용하면 다음 줄로 넘어간다.

 

<script type="text/javascript">

CKEDITOR.replace('editor1',{

toolbar:

[['Bold','-', 'Italic'], ['NumberedList'] ]

});

</script>

-javascript에서 공백 체크

javascript로 입력 값이 공백일 때 체크

 

if(CKEDITOR.instances.content.getData() == '')

{

window.alert('내용을 입력해 주세요.');

CKEDITOR.instances.content.focus();

return false;

}

-Textarea의 넓이와 높이 지정

<script type="text/javascript">

CKEDITOR.replace('editor',{

width:'100%',

height:'300'

});

</script>

 

-이미지 파일 업로드 구현

해당 경로에 upload.php파일을 넣는다.

<script type="text/javascript">

CKEDITOR.replace('editor',{

filebrowserImageUploadUrl:"경로/ckeditor/upload.php?type=Images"

});

</script>

 

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>";

}

}

?>