네이버 스마트에디터 적용하기
네이버의 스마트에디터를 그누 스킨에 적용하는 방법이 없어서 올려봅니다.
1. 네이버 스마트 에디터를 다운받는다.
http://dev.naver.com/projects/smarteditor/download
2. 다운받은 에디터 압축해제 후 그누보드 루트에 업로드한다.
3. http://dev.naver.com/projects/jindo/download에서 jindo.min.js를 다운로드 받아 /js 폴더에 복사한다.
(압축 푼 폴더-SmartEditor-에 보시면 설치 가이드 html이 있습니다.)
4. 적용하고자 하는 스킨의 write.skin.php 파일의 소스코드를 메모장이나 에디트플러스 등의 프로그램으로 오픈 한다.
5. 최상단에 아래 코드를 넣어 스마트에디터 사용 준비를 한다.
<? // Naver SmartEditor 삽입
if ($is_dhtml_editor) {
echo "<script type=\"text/javascript\" src=\"{$g4[path]}/SmartEditor/js/HuskyEZCreator.js\" charset=\"utf-8\"></script>";
}
?>
6. 적용할 textarea에 아래 코드로 교체한다.
<textarea name="wr_content" id="ir1" style="width:100%; height:80px" <? if ($write_min || $write_max) { ?>onkeyup="check_byte('wr_content', 'char_count');"<?}?> itemname="내용" required><?=$content?></textarea>
<? if ($write_min || $write_max) { ?><script language="javascript"> check_byte('wr_content', 'char_count'); </script><?}?>
(그누의 내용 즉 wr_content부분에 삽입하는 것을 예로 들었습니다. 볼드 부분의 입력부분만 주의를 기울이시고, 여러개 삽입시 삽입하고자 하는 곳에 위 코드를 그대로 복사하고, id, name만 맞춰주시면 됩니다.)
7. 제일 마지막에 에디터를 생성하고, 에디터에 입력된 내용을 textarea로 전송하는 스크립트를 삽입합니다.
<script language="JavaScript">
<!--
var oEditors = [];
nhn.husky.EZCreator.createInIFrame(oEditors, "ir1", "<?=$g4[path]?>/SmartEditor/SEditorSkin.html", "createSEditorInIFrame");
function _onSubmit(elClicked){
// 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어 줍니다.
oEditors.getById["ir1"].exec("UPDATE_IR_FIELD", []);
// 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
1. 네이버 스마트 에디터를 다운받는다.
http://dev.naver.com/projects/smarteditor/download
2. 다운받은 에디터 압축해제 후 그누보드 루트에 업로드한다.
3. http://dev.naver.com/projects/jindo/download에서 jindo.min.js를 다운로드 받아 /js 폴더에 복사한다.
(압축 푼 폴더-SmartEditor-에 보시면 설치 가이드 html이 있습니다.)
4. 적용하고자 하는 스킨의 write.skin.php 파일의 소스코드를 메모장이나 에디트플러스 등의 프로그램으로 오픈 한다.
5. 최상단에 아래 코드를 넣어 스마트에디터 사용 준비를 한다.
<? // Naver SmartEditor 삽입
if ($is_dhtml_editor) {
echo "<script type=\"text/javascript\" src=\"{$g4[path]}/SmartEditor/js/HuskyEZCreator.js\" charset=\"utf-8\"></script>";
}
?>
6. 적용할 textarea에 아래 코드로 교체한다.
<textarea name="wr_content" id="ir1" style="width:100%; height:80px" <? if ($write_min || $write_max) { ?>onkeyup="check_byte('wr_content', 'char_count');"<?}?> itemname="내용" required><?=$content?></textarea>
<? if ($write_min || $write_max) { ?><script language="javascript"> check_byte('wr_content', 'char_count'); </script><?}?>
(그누의 내용 즉 wr_content부분에 삽입하는 것을 예로 들었습니다. 볼드 부분의 입력부분만 주의를 기울이시고, 여러개 삽입시 삽입하고자 하는 곳에 위 코드를 그대로 복사하고, id, name만 맞춰주시면 됩니다.)
7. 제일 마지막에 에디터를 생성하고, 에디터에 입력된 내용을 textarea로 전송하는 스크립트를 삽입합니다.
<script language="JavaScript">
<!--
var oEditors = [];
nhn.husky.EZCreator.createInIFrame(oEditors, "ir1", "<?=$g4[path]?>/SmartEditor/SEditorSkin.html", "createSEditorInIFrame");
function _onSubmit(elClicked){
// 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어 줍니다.
oEditors.getById["ir1"].exec("UPDATE_IR_FIELD", []);
// 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
try{
elClicked.form.submit();
}catch(e){}
}
//-->
</script>
여러개를 삽입한 경우 해당 코드를 복사하여 넣어 주시면 됩니다.;
예를 들어 id가 ir1, name이 wr_content인 기존 에디터에 id가 wr_1, name이 wr_1인 에디터가 추가될 경우 위 코드에서 생성부분과 전달 부분에 코드를 하나더 추가하면 됩니다.
<script language="JavaScript">
<!--
var oEditors = [];
nhn.husky.EZCreator.createInIFrame(oEditors, "ir1", "<?=$g4[path]?>/SmartEditor/SEditorSkin.html", "createSEditorInIFrame");
nhn.husky.EZCreator.createInIFrame(oEditors, "wr_4", "<?=$g4[path]?>/SmartEditor/SEditorSkin.html", "createSEditorInIFrame"); --> 추가
function _onSubmit(elClicked){
// 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어 줍니다.
oEditors.getById["ir1"].exec("UPDATE_IR_FIELD", []);
oEditors.getById["wr_4"].exec("UPDATE_IR_FIELD", []); --> 추가
// 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
elClicked.form.submit();
}catch(e){}
}
//-->
</script>
여러개를 삽입한 경우 해당 코드를 복사하여 넣어 주시면 됩니다.;
예를 들어 id가 ir1, name이 wr_content인 기존 에디터에 id가 wr_1, name이 wr_1인 에디터가 추가될 경우 위 코드에서 생성부분과 전달 부분에 코드를 하나더 추가하면 됩니다.
<script language="JavaScript">
<!--
var oEditors = [];
nhn.husky.EZCreator.createInIFrame(oEditors, "ir1", "<?=$g4[path]?>/SmartEditor/SEditorSkin.html", "createSEditorInIFrame");
nhn.husky.EZCreator.createInIFrame(oEditors, "wr_4", "<?=$g4[path]?>/SmartEditor/SEditorSkin.html", "createSEditorInIFrame"); --> 추가
function _onSubmit(elClicked){
// 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어 줍니다.
oEditors.getById["ir1"].exec("UPDATE_IR_FIELD", []);
oEditors.getById["wr_4"].exec("UPDATE_IR_FIELD", []); --> 추가
// 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
try{
elClicked.form.submit();
}catch(e){}
}
//-->
</script>
차~암~ 쉽죠잉~~~~
참고로 cheditor가 있는 경우 모두 제거해 주셔야 글쓰기시 '글쓰기에는 $wr_id 값을 사용하지 않습니다' 라는 삽질형 오류가 나지 않습니다..
삽입된 경우 최상단 아래 코드 제거
if ($is_dhtml_editor) {
include_once("$g4[path]/lib/cheditor4.lib.php");
echo "<script src='$g4[cheditor4_path]/cheditor.js'></script>";
echo cheditor1('wr_content', '100%', '250');
}
하단 스크립투군에 아래 코드 제거
if ($is_dhtml_editor) echo cheditor3('wr_content');
많이 사용하시길 바래요~~~
elClicked.form.submit();
}catch(e){}
}
//-->
</script>
차~암~ 쉽죠잉~~~~
참고로 cheditor가 있는 경우 모두 제거해 주셔야 글쓰기시 '글쓰기에는 $wr_id 값을 사용하지 않습니다' 라는 삽질형 오류가 나지 않습니다..
삽입된 경우 최상단 아래 코드 제거
if ($is_dhtml_editor) {
include_once("$g4[path]/lib/cheditor4.lib.php");
echo "<script src='$g4[cheditor4_path]/cheditor.js'></script>";
echo cheditor1('wr_content', '100%', '250');
}
하단 스크립투군에 아래 코드 제거
if ($is_dhtml_editor) echo cheditor3('wr_content');
많이 사용하시길 바래요~~~
많은 분들이 댓글 질문을 하셨는데, 자주 들어오지 않는 관계로 답변을 못해드린게 많았네요..
간혹 들어오는대로 답변을 달거나 이해가 잘 가시도록 본문을 수정하겠습니다.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 36개
좋은 팁 감사합니다..
다른 플젝중이라 시간이 없네요~
앞으로 API 적용한게 안올라오면 함 도전해 보겠습니다.
우선 추천합니다~
웹에 플래시와 이미지 있으면 그대로 복사하여 에디터에 붙여 넣으시면 되고요~
쓰기페이지에서는 파일 업로드 기능을 이용하고, 뷰페이지에서 보여주면 되지 않을까요???
추천해 주신분들 감사합니다 ^^
위의 글을 보니 그런것 같은데... Eur-kr 버전에는 적용이 불가능 한지?
이거 해봤는데 내용이 출력이 안되요 ㅠ.ㅠ
어디가 잘못된거지 ㅠ.ㅠ
예를 들면 영카트의 사용후기 입력 부분에 스마트에디터를 적용하려면 어찌하여야 하나용??
<input type=image id="btn_submit" src="<?=$board_skin_path?>/img/btn_write.gif" border=0 accesskey='s' onclick="_onSubmit(this)" >
설명중 이 함수 호출이 빠진걸 알았습니다.
onclick="_onSubmit(this)"
이거 넣으니 잘됩니다.
'적용할 textarea'라는게 무슨뜻이죠?
제가 적용하고 싶은 스킨에는 textarea 태그가 없는데요ㅠㅠㅠㅠㅠ
적용할 textarea란 기존 write.skin.php 페이지 안에 기존 ch에디터나 입력란으로 사용된 textarea 태그를 말하는 것 입니다. 해당 태그를 위 코드로 교체하라는 얘기 입니다.
적용하시고자 하는 스킨에 textarea 태그가 없지는 않을 것이니 다시 확인해 보시면 됩니다.
왜 그럴까요... 뭐가 문제일까요?
만약 적용이 안된다면 어떤 식으로든 에러 메시지를 보셨을 것 같은데요...
어떤 에러인줄 알아야 알려드릴 수 있을 것 같습니다.
글쓰기시 '글쓰기에는 $wr_id 값을 사용하지 않습니다' 라는 삽질형 오류가 납니다
왜그럴까요?
말씀하신대로 임시저장은 ajax로 시간이든 카운트 등 조건줘서 db로 날리면 될거 같은데, 죄송하지만 위 코드 외 이상으로 개발할 예정이 없습니다.
실력도 안되지만 다른 작업들이 많은지라...
그런데요 부트스트렙에서 에러나와서 파일첨부가 안되더라구요 흑흑
크롬이랑 익스플로러10 은 안되는건가요..ㅠ?
뭔짓을 해도 그대로라 지금 애가 탑니다 힝