[ editor ] 네이버 스마트 에디트 SmartEditor2.0 Basic (2.2.1) 설치 > gnuboard

http://dev.naver.com/projects/smarteditor/download 링크에서 SmartEditor2.0 Basic (2.2.1)버젼을 다운로드 

root 폴더에 smart_editor를 넣을 디렉토리를 생성한다 에디터를 업로드 하고 설정을 시작해볼까요?

게시판 skin 폴더에 write.skin.php에서 현재 사용중인 모든 에디터를 제거한다. 

혹시나 실수 할 수 도 있으니 기존 파일을 다른이름으로 바꾸고 생성해서 사용하는게 좋겠지요?

일단 상단부분에

[code]

<?

//전 스마트 에디터를 이렇게 했습니다.

$g4[smart_path] = "$g4[path]/smartedit2";

// Naver SmartEditor 삽입 

if($is_dhtml_editor) { 

    echo "<script type=\"text/javascript\" src=\"$g4[smart_path]/js/HuskyEZCreator.js\" charset=\"utf-8\"></script>"; 

} 

?>

[/code]

부분을 추가 textarea 부분을

[code]

<textarea <?php if($is_dhtml_editor){?>id="ir1"<?}?> name="wr_content" class="textarea required" rows="5" cols="1" title="내용" <?php if($is_dhtml_editor){?>style="display:none;"<?}?>><?php echo $content?></textarea>

[/code]

이렇게 수정을 한다 id='ir1' 이부분이 에디터와 연결된다

하단 submit 버튼에는 

[code]

<input type="image" src="<?=$board_skin_path?>/img/ok_btn.gif" title="확인" onclick='submitContents(this)' /> 

[/code]

처럼 onclick을 추가한다. 하단부분에 다음과 같은 자바스크립트를 넣어준다

[code]

<?php if ($is_dhtml_editor) { ?>

<script type="text/javascript">

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

    oAppRef: oEditors,

    elPlaceHolder: "ir1",

    sSkinURI: "<?=$g4[smart_path]?>/SmartEditor2Skin.html", 

    htParams : {

        bUseToolbar : true,

        fOnBeforeUnload : function(){

            //alert("아싸!"); 

        }

    }  , //boolean

    fOnAppLoad : function(){

    //예제 코드

    //oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);

    },

    fCreator: "createSEditor2"

});

function pasteHTML() {

    var sHTML = "<span style='color:#FF0000;'>이미지도 같은 방식으로 삽입합니다.<\/span>";

    oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);

}

function showHTML() {

    var sHTML = oEditors.getById["ir1"].getIR();

    alert(sHTML);

}

function submitContents(elClickedObj) {

    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []); // 에디터의 내용이 textarea에 적용됩니다.

    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.

    try {

        elClickedObj.form.submit();

    } catch(e) {}

}

function setDefaultFont() {

    var sDefaultFont = '돋움';

    var nFontSize = 24;

    oEditors.getById["ir1"].setDefaultFont(sDefaultFont, nFontSize);

}

</script>

<?}?>

[/code]

여기까지 진행하면 에디터는 정상적으로 사용이 가능하다. 하지만, 사진이 문제

사진을 정상적으로 업로드 하기위해서는 다음의 설정이 필요하다

먼저 

smartedit2/quick_photo_uploader/popup/FileUploader.php 

[code]

<?

$new_path = "../upload/".urlencode($_FILES['Filedata']['name']); //이부분을

$new_path = "../../../data/smartedit2/".urlencode($_FILES['Filedata']['name']); //이렇게

//아래 URL을 변경하시면 됩니다.

$url .= "&sFileURL=http://test.naver.com/popup/upload/".urlencode(urlencode($name)); //이부분을  

$url .= "&sFileURL=http://도메인/data/smartedit2/".urlencode(urlencode($name)); //이렇게

?>

[/code]

html5에서 사용되는 업로더

smartedit2/quick_photo_uploader/popup/FileUploader_html5.php

[code]

<?

$newPath = "../upload/".iconv("utf-8", "cp949", $file->name); //이부분을

$newPath = "../../../data/smartedit2/".iconv("utf-8", "cp949", $file->name); //이렇게

$sFileInfo .= "&sFileURL=http://test.naver.com/smartedirot2/".$file->name; //이부분을

$sFileInfo .= "&sFileURL=http://도메인/data/smartedit2/".$file->name; //로 변경

?>

[/code]

이렇게 해서 사진을 업로드 하셔도 아직은 안돼실 거에요 .. 되면 좋구요....

다음은 smartedit2/quick_photo_uploader/popup/QuickPhotoPopup.js

[code]

function callFileUploader (){    

 oFileUploader = new jindo.FileUploader(jindo.$("uploadInputBox"),{     

  sUrl  : 'http://test.naver.com/Official-trunk/workspace/popup/quick_photo/FileUploader.php', //샘플 URL입니다. 

이렇게 되어있는 부분을

function callFileUploader (){    

 oFileUploader = new jindo.FileUploader(jindo.$("uploadInputBox"),{     

  sUrl  : 'http://도메인/smartedit2/quick_photo_uploader/pupup/FileUploader.php', //샘플 URL입니다. 

로 수정해 주시고

function html5Upload() {       

 var tempFile,       

 sUploadURL;            

 sUploadURL= 'http://test.naver.com/popup/quick_photo/FileUploader_html5.php';  //upload URL

부분은

function html5Upload() {      

 var tempFile,       

 sUploadURL;            

 sUploadURL= 'http://도메인/smartedit2/quick_photo_uploader/pupup/FileUploader_html5.php';  //upload URL

이렇게 수정해주시면 됩니다.

마지막 콜백파일 이파일은 수정을 하지 않아도 되기는 합니다. 혹시나 해서 바꿨어요

다음은 smartedit2/quick_photo_uploader/popup/callback.html 파일  

// document.domain 설정   

try { document.domain = "http://*.naver.com"; } catch(e) {}  

// document.domain 설정   try { document.domain = http://도메인; } catch(e) {}

으로 변경

[/code]