[CKEditor] 그누보드에 적용하기 정보
[CKEditor] 그누보드에 적용하기
관련링크
본문
1. 먼저 ckeditor(위지윅 에디터)를 다운 받습니다.
ckeditor - http://ckeditor.com/download
다운받은 ckeditor를 압축 푼뒤 그누보드 / ckeditor 폴더에 업로드 합니다.
2-1. 그누보드 / skin / board / basic / write.skin.php 4줄
[ 원본 ]
if ($is_dhtml_editor) {
include_once("$g4[path]/lib/cheditor4.lib.php");
echo "<script src='$g4[cheditor4_path]/cheditor.js'></script>";
echo cheditor1('wr_content', '100%', '250');
}
[수정 ]
if ($is_dhtml_editor) {
//include_once("$g4[path]/lib/ckeditor.lib.php");
echo "<script src='$g4[path]/ckeditor/ckeditor.js'></script>";
//echo ckeditor1('wr_content', '100%', '250');
}
2-2. 그누보드 / skin / board / basic / write.skin.php 130라인
[ 원본 ]
<? if ($is_dhtml_editor) { ?>
<?=cheditor2('wr_content', $content);?>
[ 수정 ]
<?php if ($is_dhtml_editor) { ?>
<?php //echo ckeditor2('wr_content', $content); ?>
<textarea id="wr_content" name="wr_content" class="tx" required style='width:100%; word-break:break-all;' rows="10" title="내용"><?php echo $content; ?> </textarea>
<script type="text/javascript">
CKEDITOR.replace('wr_content',
{
skin: 'v2', //에디터 스킨 (kama, office2003, v2)
customConfig : '<?php echo $g4[path]; ?>/ckeditor/config.js', //커스텀설정js파일위치
filebrowserUploadUrl: '<?php echo $g4[path]; ?>/ckeditor/upload.php?type=Files',
filebrowserImageUploadUrl: '<?php echo $g4[path]; ?>/ckeditor/upload.php?type=Images',
filebrowserFlashUploadUrl: '<?php echo $g4[path]; ?>/ckeditor/upload.php?type=Flash'
}
);
</script>
2-3. 그누보드 / skin / board / basic / write.skin.php 339라인
[ 원본 ]
if ($is_dhtml_editor) echo cheditor3('wr_content');
[ 수정 ]
//if ($is_dhtml_editor) echo cheditor3('wr_content');
3. ckeditor 환경설정 변경
그누보드 / ckeditor / config.js 파일을 아래 내용으로 교체합니다.
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
config.font_defaultLabel = '굴림';
config.font_names = '굴림/Gulim;돋움/Dotum;바탕/Batang;궁서/Gungsuh;Arial/Arial;Comic Sans MS/Comic Sans MS;Courier New/Courier New;Georgia/Georgia;Lucida Sans Unicode/Lucida Sans Unicode;Tahoma/Tahoma;Times New Roman/Times New Roman;Trebuchet MS/Trebuchet MS;Verdana/Verdana';
config.fontSize_defaultLabel = '12px';
config.fontSize_sizes = '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;';
config.language = "ko";
config.resize_enabled = true;
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
config.startupFocus = true;
config.uiColor = '#eaebe7';
config.toolbarCanCollapse = false;
config.menu_subMenuDelay = 0;
config.width ='100%';
config.height ='200';
config.toolbar = [['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','TextColor','BGColor','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','Link','Unlink','-','Find','Replace','SelectAll','RemoveFormat','-','Image','Flash','Table','Smiley','SpecialChar'],'/',['Source','Preview','-','ShowBlocks','-','Font','FontSize','Cut','Copy','Paste','PasteText','PasteFromWord','Undo','Redo','-','Maximize','About']];
};
4. ckeditor 에서 업로드 가능하도록 upload.php 파일을 추가합니다.
4-1. 그누보드 / data / ckeditor / image 폴더를 생성합니다.
ckeditor 와 ckeditor / image 폴더의 퍼미션을 777 로 변경합니다.
4-2. 그누보드 / ckeditor / upload.php 파일을 생성후 아래 내용을 삽입합니다.
※ 중복파일 체크 및 파일 이름이 한글이거나 공백이 포함 된 경우 오류발생하는 미완성 입니다. ※
<?php
include_once("_common.php");
$up_url = '/gnuboard/data/ckeditor/image'; // 기본 업로드 URL
$up_dir = '../data/ckeditor/image'; // 기본 업로드 폴더
// 업로드 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 && 'swf' != $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>";
}
?>
5. 그누보드 / bbs / write_update.php 7~8줄을 주석처리합니다.
[ 원본 ]
if (substr_count($wr_content, "&#") > 50) {
alert("내용에 올바르지 않은 코드가 다수 포함되어 있습니다.");
exit;
}
[ 수정 ]
if (substr_count($wr_content, "&#") > 50) {
//alert("내용에 올바르지 않은 코드가 다수 포함되어 있습니다.");
//exit;
}
참고자료
http://www.autoboy.pe.kr/130
http://happyjung.com/gnuboard/bbs/board.php?bo_table=lecture&wr_id=1109
ckeditor - http://ckeditor.com/download
다운받은 ckeditor를 압축 푼뒤 그누보드 / ckeditor 폴더에 업로드 합니다.
2-1. 그누보드 / skin / board / basic / write.skin.php 4줄
[ 원본 ]
if ($is_dhtml_editor) {
include_once("$g4[path]/lib/cheditor4.lib.php");
echo "<script src='$g4[cheditor4_path]/cheditor.js'></script>";
echo cheditor1('wr_content', '100%', '250');
}
[수정 ]
if ($is_dhtml_editor) {
//include_once("$g4[path]/lib/ckeditor.lib.php");
echo "<script src='$g4[path]/ckeditor/ckeditor.js'></script>";
//echo ckeditor1('wr_content', '100%', '250');
}
2-2. 그누보드 / skin / board / basic / write.skin.php 130라인
[ 원본 ]
<? if ($is_dhtml_editor) { ?>
<?=cheditor2('wr_content', $content);?>
[ 수정 ]
<?php if ($is_dhtml_editor) { ?>
<?php //echo ckeditor2('wr_content', $content); ?>
<textarea id="wr_content" name="wr_content" class="tx" required style='width:100%; word-break:break-all;' rows="10" title="내용"><?php echo $content; ?> </textarea>
<script type="text/javascript">
CKEDITOR.replace('wr_content',
{
skin: 'v2', //에디터 스킨 (kama, office2003, v2)
customConfig : '<?php echo $g4[path]; ?>/ckeditor/config.js', //커스텀설정js파일위치
filebrowserUploadUrl: '<?php echo $g4[path]; ?>/ckeditor/upload.php?type=Files',
filebrowserImageUploadUrl: '<?php echo $g4[path]; ?>/ckeditor/upload.php?type=Images',
filebrowserFlashUploadUrl: '<?php echo $g4[path]; ?>/ckeditor/upload.php?type=Flash'
}
);
</script>
2-3. 그누보드 / skin / board / basic / write.skin.php 339라인
[ 원본 ]
if ($is_dhtml_editor) echo cheditor3('wr_content');
[ 수정 ]
//if ($is_dhtml_editor) echo cheditor3('wr_content');
3. ckeditor 환경설정 변경
그누보드 / ckeditor / config.js 파일을 아래 내용으로 교체합니다.
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
config.font_defaultLabel = '굴림';
config.font_names = '굴림/Gulim;돋움/Dotum;바탕/Batang;궁서/Gungsuh;Arial/Arial;Comic Sans MS/Comic Sans MS;Courier New/Courier New;Georgia/Georgia;Lucida Sans Unicode/Lucida Sans Unicode;Tahoma/Tahoma;Times New Roman/Times New Roman;Trebuchet MS/Trebuchet MS;Verdana/Verdana';
config.fontSize_defaultLabel = '12px';
config.fontSize_sizes = '8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;';
config.language = "ko";
config.resize_enabled = true;
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
config.startupFocus = true;
config.uiColor = '#eaebe7';
config.toolbarCanCollapse = false;
config.menu_subMenuDelay = 0;
config.width ='100%';
config.height ='200';
config.toolbar = [['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','TextColor','BGColor','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','Link','Unlink','-','Find','Replace','SelectAll','RemoveFormat','-','Image','Flash','Table','Smiley','SpecialChar'],'/',['Source','Preview','-','ShowBlocks','-','Font','FontSize','Cut','Copy','Paste','PasteText','PasteFromWord','Undo','Redo','-','Maximize','About']];
};
4. ckeditor 에서 업로드 가능하도록 upload.php 파일을 추가합니다.
4-1. 그누보드 / data / ckeditor / image 폴더를 생성합니다.
ckeditor 와 ckeditor / image 폴더의 퍼미션을 777 로 변경합니다.
4-2. 그누보드 / ckeditor / upload.php 파일을 생성후 아래 내용을 삽입합니다.
※ 중복파일 체크 및 파일 이름이 한글이거나 공백이 포함 된 경우 오류발생하는 미완성 입니다. ※
<?php
include_once("_common.php");
$up_url = '/gnuboard/data/ckeditor/image'; // 기본 업로드 URL
$up_dir = '../data/ckeditor/image'; // 기본 업로드 폴더
// 업로드 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 && 'swf' != $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>";
}
?>
5. 그누보드 / bbs / write_update.php 7~8줄을 주석처리합니다.
[ 원본 ]
if (substr_count($wr_content, "&#") > 50) {
alert("내용에 올바르지 않은 코드가 다수 포함되어 있습니다.");
exit;
}
[ 수정 ]
if (substr_count($wr_content, "&#") > 50) {
//alert("내용에 올바르지 않은 코드가 다수 포함되어 있습니다.");
//exit;
}
참고자료
http://www.autoboy.pe.kr/130
http://happyjung.com/gnuboard/bbs/board.php?bo_table=lecture&wr_id=1109
추천
7
7
댓글 9개
좋은 정보 공유해주셔서 감사합니다.
좋은 정보 완전 감사드립니다.
그런데, 얘네 라이센스가 어떻게 되는지 아시나요?
포함해서 재배포를 해도 되는건지를 모르겠네요.
그런데, 얘네 라이센스가 어떻게 되는지 아시나요?
포함해서 재배포를 해도 되는건지를 모르겠네요.
재배포해도 상관없는것으로 알고 있습니다.
처음 글입력하면 wr_content : 필수입력 입니다. 라면서 글쓰기거부해요.
경고창뜨고 다시클릭하면 정상등록되는데.. 경고창없애려면 어떻게 해야하나요??
경고창뜨고 다시클릭하면 정상등록되는데.. 경고창없애려면 어떻게 해야하나요??
완전한 내용은 아니구요.. 글 작성후 에디터 본문 한번 클릭한후에 저장을 하면 정상 저장되네요... 좀더 연구해본후 방법을 공유하도록 하겠습니다.
<textarea id="wr_content" name="wr_content" required 에서
required 를 삭제하면 해당 경고는 안보셔도 될듯..
단, 본문이 필수가 아닌 선택으로 된다는 단점이....
required 를 삭제하면 해당 경고는 안보셔도 될듯..
단, 본문이 필수가 아닌 선택으로 된다는 단점이....
자굼 준비중인데 감사합니다.
추천드립니다.
추천드립니다.
GNU
이런것도 있군요,,,
