그누보드에 스마트 에디터 달기 > 잡동

(2.2.1)버젼 적용및 사진업로드 정보

네이버 SmartEditor2.0 Basic (2.2.1)버젼 적용및 사진업로드

불량학생
2013.02.19 18:01:24
조회 6,472
댓글 24

첨부파일

FileUploader.php (1.7K)137회 다운로드2013.02.27 17:43:57

FileUploader_html5.php (1.5K)34회 다운로드2013.02.27 17:43:57

본문

http://dev.naver.com/projects/smarteditor/download 링크에서 SmartEditor2.0 Basic (2.2.1)버젼을 다운로드
root 폴더에 smart_editor를 넣을 디렉토리를 생성한다 에디터를 업로드 하고 설정을 시작해볼까요?

게시판 skin 폴더에 write.skin.php에서 현재 사용중인 모든 에디터를 제거한다.
혹시나 실수 할 수 도 있으니 기존 파일을 다른이름으로 바꾸고 생성해서 사용하는게 좋겠지요?

일단 상단부분에

1<?
2//전 스마트 에디터를 이렇게 했습니다.
3$g4[smart_path] = "$g4[path]/smartedit2";
4// Naver SmartEditor 삽입 
5if($is_dhtml_editor)
6{ 
7    echo "<script type=\"text/javascript\" src=\"$g4[smart_path]/js/HuskyEZCreator.js\" charset=\"utf-8\"></script>"; 
8} 
9?>

부분을 추가 textarea 부분을

`1`	`<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>`

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

하단 submit 버튼에는

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

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

01<?php if ($is_dhtml_editor) { ?>
02<script type="text/javascript">
03var oEditors = [];
04nhn.husky.EZCreator.createInIFrame({
05    oAppRef: oEditors,
06    elPlaceHolder: "ir1",
07    sSkinURI: "<?=$g4[smart_path]?>/SmartEditor2Skin.html",   
08    htParams : {bUseToolbar : true,
09        fOnBeforeUnload : function(){
10            //alert("아싸!"); 
11        }
12    }, //boolean
13    fOnAppLoad : function(){
14        //예제 코드
15        //oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
16    },
17    fCreator: "createSEditor2"
18});
19 
20function pasteHTML() {
21    var sHTML = "<span style='color:#FF0000;'>이미지도 같은 방식으로 삽입합니다.<\/span>";
22    oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
23}
24 
25function showHTML() {
26    var sHTML = oEditors.getById["ir1"].getIR();
27    alert(sHTML);
28}
29     
30function submitContents(elClickedObj) {
31    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);  // 에디터의 내용이 textarea에 적용됩니다.
32     
33    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
34     
35    try {
36        elClickedObj.form.submit();
37    } catch(e) {}
38}
39 
40function setDefaultFont() {
41    var sDefaultFont = '돋움';
42    var nFontSize = 24;
43    oEditors.getById["ir1"].setDefaultFont(sDefaultFont, nFontSize);
44}
45</script>
46<?}?>

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

사진을 정상적으로 업로드 하기위해서는 다음의 설정이 필요하다
먼저
smartedit2/quick_photo_uploader/popup/FileUploader.php

1<?
2$new_path = "../upload/".urlencode($_FILES['Filedata']['name']); //이부분을
3$new_path = "../../../data/smartedit2/".urlencode($_FILES['Filedata']['name']); //이렇게
4//아래 URL을 변경하시면 됩니다.
5$url .= "&sFileURL=http://test.naver.com/popup/upload/".urlencode(urlencode($name)); //이부분을  
6$url .= "&sFileURL=http://도메인/data/smartedit2/".urlencode(urlencode($name)); //이렇게
7?>

html5에서 사용되는 업로더
smartedit2/quick_photo_uploader/popup/FileUploader_html5.php

1<?
2$newPath = "../upload/".iconv("utf-8", "cp949", $file->name); //이부분을
3$newPath = "../../../data/smartedit2/".iconv("utf-8", "cp949", $file->name); //이렇게
4 
5$sFileInfo .= "&sFileURL=http://test.naver.com/smartedirot2/".$file->name; //이부분을
6$sFileInfo .= "&sFileURL=http://도메인/data/smartedit2/".$file->name; //로 변경
7?>

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

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

1function callFileUploader (){    
2    oFileUploader = new jindo.FileUploader(jindo.$("uploadInputBox"),{     
3        sUrl  : 'http://test.naver.com/Official-trunk/workspace/popup/quick_photo/FileUploader.php', //샘플 URL입니다. 
4이렇게 되어있는 부분을 
5 
6function callFileUploader (){    
7    oFileUploader = new jindo.FileUploader(jindo.$("uploadInputBox"),{     
8        sUrl  : 'http://도메인/smartedit2/quick_photo_uploader/popup/FileUploader.php', //샘플 URL입니다. 

로 수정해 주시고

1function html5Upload() {       
  var tempFile,       
  sUploadURL;            
  sUploadURL= 'http://test.naver.com/popup/quick_photo/FileUploader_html5.php';  //upload URL

부분은

1function html5Upload() {      
  var tempFile,       
  sUploadURL;            
  sUploadURL= 'http://도메인/smartedit2/quick_photo_uploader/popup/FileUploader_html5.php';  //upload URL 

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

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

1// document.domain 설정   
2try { document.domain = "http://*.naver.com"; } catch(e) {}   
3 
4// document.domain 설정   try { document.domain = http://도메인; } catch(e) {} 

으로 변경

사진업로드 때문에 겁나게 삽집을 하다가 다른분들은 고생하지 않나 싶어 올려봅니다

<?
if ($is_dhtml_editor) echo cheditor3('wr_content');
?>
삭제