네이버 SmartEditor2.0 Basic (2.2.1)버젼 적용및 사진업로드 정보
네이버 SmartEditor2.0 Basic (2.2.1)버젼 적용및 사진업로드첨부파일
본문
http://dev.naver.com/projects/smarteditor/download 링크에서 SmartEditor2.0 Basic (2.2.1)버젼을 다운로드
root 폴더에 smart_editor를 넣을 디렉토리를 생성한다 에디터를 업로드 하고 설정을 시작해볼까요?
게시판 skin 폴더에 write.skin.php에서 현재 사용중인 모든 에디터를 제거한다.
혹시나 실수 할 수 도 있으니 기존 파일을 다른이름으로 바꾸고 생성해서 사용하는게 좋겠지요?
일단 상단부분에
부분을 추가 textarea 부분을
이렇게 수정을 한다 id='ir1' 이부분이 에디터와 연결된다
하단 submit 버튼에는
처럼 onclick을 추가한다. 하단부분에 다음과 같은 자바스크립트를 넣어준다
여기까지 진행하면 에디터는 정상적으로 사용이 가능하다. 하지만, 사진이 문제
사진을 정상적으로 업로드 하기위해서는 다음의 설정이 필요하다
먼저
smartedit2/quick_photo_uploader/popup/FileUploader.php
html5에서 사용되는 업로더
smartedit2/quick_photo_uploader/popup/FileUploader_html5.php
이렇게 해서 사진을 업로드 하셔도 아직은 안돼실 거에요 .. 되면 좋구요....
다음은 smartedit2/quick_photo_uploader/popup/QuickPhotoPopup.js
로 수정해 주시고
부분은
이렇게 수정해주시면 됩니다.
마지막 콜백파일 이파일은 수정을 하지 않아도 되기는 합니다. 혹시나 해서 바꿨어요
다음은 smartedit2/quick_photo_uploader/popup/callback.html 파일
으로 변경
사진업로드 때문에 겁나게 삽집을 하다가 다른분들은 고생하지 않나 싶어 올려봅니다
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
5
댓글 24개
기본적으로 utf-8을 사용하는데 euc-kr사용시
quick_photo_uploader/popup/FileUploader.php 의 인코딩을 ansi로
quick_photo_uploader/popup/FileUploader_html5.php 의 인코딩도 ansi
두개만 해주시면 됩니다
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 베이직을 써보는군요.^^
단 저거 이미지 업로드 수정을 제가 잘못한건지.. 업로드가 안되긴하지만.. 계속 도전해볼께요.. ~ 추첝드립니다. ^^
게시판 스킨 write.skin.php 하단에 보시면
<?
if ($is_dhtml_editor) echo cheditor3('wr_content');
?>
이거 지우셔야 작동되요.
불량학생님.
이런 좋은 좋은정보 알려주셔서 감사합니다. !! 저도 드디어 스마트에디터 2.0 베이직을 써보는군요.^^
단 저거 이미지 업로드 수정을 제가 잘못한건지.. 업로드가 안되긴하지만.. 계속 도전해볼께요.. ~ 추첝드립니다. ^^
감가합니다 ^_^
감사합니다. 정말 유용하고 좋은 팁입니다. 여태 스마트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 업로드화일 저장할 디렉토리 생성하면, 업로드가 가능하게 됩니다.
sUploadURL= 'http://도메인/smartedit2/quick_photo_uploader/pupup/FileUploader_html5.php'; //upload URL
----------> pupup => popup 수정
data/smartedit2 업로드화일 저장할 디렉토리 생성하면, 업로드가 가능하게 됩니다.
동일 이름의 다른 그림을 올리면, Overwrite되는 문제점과 그림 포함된 게시글을 모두 삭제해도 계속 남아있네요... 원래 이런것까지 처리가 안되어있는건지요? 아니면, 옵션이 있는건지요?
그래요? 테스트 한번 해봐야겠군요
네이버에서의 overwrite는 나와 있지 않는군요...
geditor참고해서 파일 수정했습니다. 첨부파일 받아서 업로드 하세요..
smarteditor 업로드 하고 디렉토리 생성 안하셔두 파일 업로드시 체크하게 수정해 두었습니다.
"&sFileURL 의 url 부분은 수정하시구요..
geditor참고해서 파일 수정했습니다. 첨부파일 받아서 업로드 하세요..
smarteditor 업로드 하고 디렉토리 생성 안하셔두 파일 업로드시 체크하게 수정해 두었습니다.
"&sFileURL 의 url 부분은 수정하시구요..
한번 올린 파일을 에디터 상에서 지운다 하더라도 삭제되지는 않는군요
geditor, smarteditor 모두 같은 현상이군요
geditor, smarteditor 모두 같은 현상이군요
뒤늦게 봤습니다. 첨부화일에 OverWrite문제 해결책을 마련했네요... 방식이 Cheditor과 Geditor과 유사하네요... 그리고, 삭제는 Cheditor5도 마찬가지로 삭제는 안되더라구요...
감사합니다. 잘 되네요..^^ 머가먼지 따라하기 바쁘네요..ㅎㅎㅎ
2.3.0 버젼도 따라하니 잘되네요..근데 QuickPhotoPopup.js 파일은 어디로 간걸까요?
2.3.0 버젼도 따라하니 잘되네요..근데 QuickPhotoPopup.js 파일은 어디로 간걸까요?
정말 감사합니다.
최근 익스 11버전때문에 업데이트 되었던데요 ^^
SmartEditor2.0 Basic (2.3.7)
암튼 이런 자료 감사합니다. 초보에겐 쉽지 않겠다만 꼭 적용시켜봐야겠어요 ^^
SmartEditor2.0 Basic (2.3.7)
암튼 이런 자료 감사합니다. 초보에겐 쉽지 않겠다만 꼭 적용시켜봐야겠어요 ^^
우선 좋은 정보 정말 감사드립니다.
다름이 아니라, 그런면 기존 그누보드의 cheditor2/cheditor3 사용부분은 어떻게 처리해야하나요?
다름이 아니라, 그런면 기존 그누보드의 cheditor2/cheditor3 사용부분은 어떻게 처리해야하나요?
설명을 천천히 읽어보세요
보낸메일 부분은 주석처리 하시면 됩니다
보낸메일 부분은 주석처리 하시면 됩니다
네.그런데 주석처리하였더니 내용입력부분이 아예 화면에 나오지 않아서 말입니다.
제가 무엇을 잘못 한 것일까요ㅠㅠ
제가 무엇을 잘못 한 것일까요ㅠㅠ
설명의 상단 줄에서 부터 차분히 확인 하시면서 다시 해보세요
위 설명의 설정에서 사진 업로드 설명부분을 뺀 부분중에 한부분이라 빠지면 에디터가 보이지 않겠지요
그리고 에디터의 폴더도 맞는지 확인해보세요
위 설명의 설정에서 사진 업로드 설명부분을 뺀 부분중에 한부분이라 빠지면 에디터가 보이지 않겠지요
그리고 에디터의 폴더도 맞는지 확인해보세요
전 왜 계속 글쓰기에는 wr_id값을 사용하지 않습니다 라고 계속나오네요 뭐가 문제일까요? ^^';