테스트 사이트 - 개발 중인 베타 버전입니다

[CKEditor 3.x] 그누보드5 에 적용하기 (2014-02-05 06:02 수정)

· 11년 전 · 9744 · 4
ckeditor 4 의 과도한 div 테그 출몰하는 것이 싫어서 ckeditor 3 버전을 그누보드 5.x 에 적용하는 방법입니다.


1. 먼저 ckeditor(위지윅 에디터)를 다운 받습니다.
ckeditor - http://ckeditor.com/download
다운받은 ckeditor를 압축 푼뒤 업로드 합니다.

그누보드 5.x / plugin / ckeditor3


2. 그누보드 5.x / skin / board / basic / write.skin.php 130라인
[ 원본 ]
<?php echo $editor_html; // 에디터 사용시는 에디터로, 아니면 textarea 로 노출 ?>

[ 수정 ]
<?php echo $editor_html; // 에디터 사용시는 에디터로, 아니면 textarea 로 노출 ?>
<?php if ($config['cf_editor'] == "ckeditor3" && $board[bo_use_dhtml_editor] == "1") { ?>
<script type="text/javascript">
CKEDITOR.replace('wr_content',
{
startupFocus : false, // 자동 focus 사용할때는 true
skin: 'v2', //에디터 스킨 (kama, office2003, v2)
customConfig : '<?php echo G5_EDITOR_URL; ?>/ckeditor3/config.js', //커스텀설정js파일위치
filebrowserUploadUrl: '<?php echo G5_EDITOR_URL; ?>/ckeditor3/upload.php?type=Files',
filebrowserImageUploadUrl: '<?php echo G5_EDITOR_URL; ?>/ckeditor3/upload.php?type=Images',
filebrowserFlashUploadUrl: '<?php echo G5_EDITOR_URL; ?>/ckeditor3/upload.php?type=Flash'
}
);
</script>
<?php } ?>



3. ckeditor 환경설정 변경
그누보드 5.x / plugin / ckeditor3 / config.js 파일 내용을 교체합니다.
http://www.happyjung.com/bbs/board.php?bo_table=lecture&wr_id=1110 참고


4. ckeditor 에서 업로드 가능하도록 upload.php 파일을 추가합니다.



4-1. 그누보드 5.x / data / ckeditor / image 폴더를 생성합니다.
ckeditor 와 ckeditor / image 폴더의 퍼미션을 777 로 변경합니다.


4-2. 그누보드 5.x / plugin / ckeditor3 / upload.php 파일을 생성후 아래 내용을 삽입합니다.

※ 중복파일 체크 및 파일 이름이 한글이거나 공백이 포함 된 경우 오류발생하는 미완성 입니다. ※

<?php
include_once("_common.php");
$up_url = '/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>";
}
?>


4-3. 이미지 삽입 텍스트창 내용 변경
http://www.happyjung.com/bbs/board.php?bo_table=lecture&wr_id=1166 참고


5. 내용에 올바르지 않은 코드가 다수 포함되어 있습니다. 에러해결하기
http://www.happyjung.com/bbs/board.php?bo_table=lecture&wr_id=1642 참고


6. 환경설정 > 기본환경설정 > 홈페이지 기본환경 설정 > 에디터 선택 에서 ckeditor3 으로 변경


참고자료
http://www.autoboy.pe.kr/130
http://www.happyjung.com/bbs/board.php?bo_table=lecture&wr_id=1644

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 4개

유용한 팁 정말 감사합니다.
2014-02-05 06:02 수정
<?php if ($config['cf_editor'] == "ckeditor3" && $board[bo_use_dhtml_editor] == "1") { ?>
를 아래와 같이 변경했습니다.
<?php if ($config['cf_editor'] == "ckeditor3") { ?>
모바일에서 채디터가 표시되버리네요;;
모바일에서는 채디터를 사용할 수 없으니 모바일에서는 textarea가 표시되도록하시려면

editor.lib.php 파일의 editor_html에 $is_mobile를 global로 가져오신 후 return 위에

if($is_mobile) {
$html = "\n<textarea id=\"$id\" name=\"$id\" class=\"$ckeditor_class\" maxlength=\"65536\">$content</textarea>";
}

return $html;

를 추가하시면됩니다.



editor.lib.php 파일을 아래와같이 수정하시면 모바일에서는 textarea가 뜹니다^^

[code]
<?php
if (!defined('_GNUBOARD_')) exit;

function editor_html($id, $content, $is_dhtml_editor=false)
{
global $g5, $config, $is_mobile;
static $js = true;

//default 값
$width = '100%';
$height = '250px';

$editor_url = G5_EDITOR_URL.'/'.$config['cf_editor'];

$html = "";
$html .= "<span class=\"sound_only\">웹에디터 시작</span>";
if ($is_dhtml_editor)
$html .= '<script>document.write("<div class=\'cke_sc\'><button type=\'button\' class=\'btn_cke_sc\'>단축키 일람</button></div>");</script>';

if ($js) {
$html .= "\n".'<script src="'.$editor_url.'/cheditor.js"></script>';
$html .= "\n".'<script>var g5_editor_url = "'.$editor_url.'";</script>';
$html .= "\n".'<script src="'.$editor_url.'/config.js"></script>';
$html .= "\n<script>";
$html .= '
$(function(){
$(".btn_cke_sc").click(function(){
if ($(this).next("div.cke_sc_def").length) {
$(this).next("div.cke_sc_def").remove();
$(this).text("단축키 일람");
} else {
$(this).after("<div class=\'cke_sc_def\' />").next("div.cke_sc_def").load("'.$editor_url.'/shortcut.html");
$(this).text("단축키 일람 닫기");
}
});
$(".btn_cke_sc_close").live("click",function(){
$(this).parent("div.cke_sc_def").remove();
});
});';
$html .= "\n</script>";
}

$ckeditor_class = $is_dhtml_editor ? "ckeditor" : "";
$html .= "\n<textarea id=\"$id\" name=\"$id\" style=\"width:100%;display:none\" maxlength=\"65536\">$content</textarea>";
if ($js) {
$html .= "
<script type=\"text/javascript\">
var {$id}_editor = new cheditor('{$id}_editor');
{$id}_editor.config.editorHeight = '{$height}';
{$id}_editor.config.editorWidth = '{$width}';
{$id}_editor.inputForm = '{$id}';
</script>";
$html .= "
<script type='text/javascript'>
{$id}_editor.run();
</script>";
}
$html .= "\n<span class=\"sound_only\">웹 에디터 끝</span>";

if ($js) $js = false;

if($is_mobile) {
$html = "\n<textarea id=\"$id\" name=\"$id\" class=\"$ckeditor_class\" maxlength=\"65536\">$content</textarea>";
}

return $html;
}


// textarea 로 값을 넘긴다. javascript 반드시 필요
function get_editor_js($id, $is_dhtml_editor=true)
{
if ($is_dhtml_editor) {
return "var {$id}_editor_data = {$id}_editor.outputBodyHTML();\n";
} else {
return "var {$id}_editor = document.getElementById('{$id}');\n";
}
}


// textarea 의 값이 비어 있는지 검사
function chk_editor_js($id, $is_dhtml_editor=true)
{
if ($is_dhtml_editor) {
return "if (!{$id}_editor_data) { alert(\"내용을 입력해 주십시오.\"); {$id}_editor.focus(); return false; }\nif (typeof(f.wr_content)!=\"undefined\") f.wr_content.value = {$id}_editor_data;\n";
} else {
return "if (!{$id}_editor.value) { alert(\"내용을 입력해 주십시오.\"); {$id}_editor.focus(); return false; }\n";
}
}

?>

[/code]
오예... 감사합니다. ^^

게시글 목록

번호 제목
1583
1580
1579
1566
1555
1533
1523
1489
1486
1471
1467
1449
1444
1443
1441
1431
1426
1425
1420
1418
1412
1405
1401
1398
1392
1383
1375
1372
1371
1370