네이버 SmartEditor2.0 Basic (2.2.1)버젼 적용및 사진업로드 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

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

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

첨부파일

FileUploader.php (1.7K) 308회 다운로드 2013-02-27 17:43:57
FileUploader_html5.php (1.5K) 77회 다운로드 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에서 현재 사용중인 모든 에디터를 제거한다.
혹시나 실수 할 수 도 있으니 기존 파일을 다른이름으로 바꾸고 생성해서 사용하는게 좋겠지요?

일단 상단부분에

<?
//전 스마트 에디터를 이렇게 했습니다.
$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>"; 
} 
?>

부분을 추가 textarea 부분을

<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 버튼에는
 
<input type="image" src="<?=$board_skin_path?>/img/ok_btn.gif" title="확인" onclick='submitContents(this)' /> 

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


<?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>
<?}?>

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

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

<?
$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)); //이렇게
?>

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

<?
$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; //로 변경
?>

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


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

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/popup/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/popup/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) {} 

으로 변경

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

댓글 24개

기본적으로 utf-8을 사용하는데 euc-kr사용시
quick_photo_uploader/popup/FileUploader.php 의 인코딩을 ansi로
quick_photo_uploader/popup/FileUploader_html5.php 의 인코딩도 ansi
두개만 해주시면 됩니다
아그리고 모르는분있을꺼같아서 제가 알려드릴께요.

게시판 스킨 write.skin.php 하단에 보시면


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

이거 지우셔야 작동되요.

불량학생님.

이런 좋은 좋은정보 알려주셔서 감사합니다. !! 저도 드디어 스마트에디터 2.0 베이직을 써보는군요.^^

단 저거 이미지 업로드 수정을 제가 잘못한건지.. 업로드가 안되긴하지만.. 계속 도전해볼께요.. ~ 추첝드립니다. ^^
sUrl  : 'http://도메인/smartedit2/quick_photo_uploader/pupup/FileUploader.php', //샘플 URL입니다.

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

----------> pupup => popup 수정

data/smartedit2 업로드화일 저장할 디렉토리 생성하면, 업로드가 가능하게 됩니다.
동일 이름의 다른 그림을 올리면, Overwrite되는 문제점과 그림 포함된 게시글을 모두 삭제해도 계속 남아있네요... 원래 이런것까지 처리가 안되어있는건지요? 아니면, 옵션이 있는건지요?
네이버에서의 overwrite는 나와 있지 않는군요...
geditor참고해서 파일 수정했습니다. 첨부파일 받아서 업로드 하세요..
smarteditor 업로드 하고 디렉토리 생성 안하셔두 파일 업로드시 체크하게 수정해 두었습니다.
"&sFileURL 의 url 부분은 수정하시구요..
뒤늦게 봤습니다. 첨부화일에 OverWrite문제 해결책을 마련했네요... 방식이 Cheditor과 Geditor과 유사하네요... 그리고, 삭제는 Cheditor5도 마찬가지로 삭제는 안되더라구요...
감사합니다.  잘 되네요..^^  머가먼지 따라하기 바쁘네요..ㅎㅎㅎ
2.3.0 버젼도 따라하니 잘되네요..근데 QuickPhotoPopup.js 파일은 어디로 간걸까요?
최근 익스 11버전때문에 업데이트 되었던데요 ^^

SmartEditor2.0 Basic (2.3.7)

암튼 이런 자료 감사합니다. 초보에겐 쉽지 않겠다만 꼭 적용시켜봐야겠어요 ^^
우선 좋은 정보 정말 감사드립니다.
다름이 아니라, 그런면 기존 그누보드의 cheditor2/cheditor3 사용부분은 어떻게 처리해야하나요?
네.그런데 주석처리하였더니 내용입력부분이 아예 화면에 나오지 않아서 말입니다.
제가 무엇을 잘못 한 것일까요ㅠㅠ
설명의 상단 줄에서 부터 차분히 확인 하시면서 다시 해보세요
위 설명의 설정에서 사진 업로드 설명부분을 뺀 부분중에 한부분이라 빠지면 에디터가 보이지 않겠지요
그리고 에디터의 폴더도 맞는지 확인해보세요
전체 3,313 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT