네이버 스마트에디터 적용하기

네이버 스마트에디터 적용하기 정보

네이버 스마트에디터 적용하기

본문

네이버의 스마트에디터를 그누 스킨에 적용하는 방법이 없어서 올려봅니다.

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">
 추가
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');

많이 사용하시길 바래요~~~

많은 분들이 댓글 질문을 하셨는데, 자주 들어오지 않는 관계로 답변을 못해드린게 많았네요..

간혹 들어오는대로 답변을 달거나 이해가 잘 가시도록 본문을 수정하겠습니다.

댓글 36개

풍운만리 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

09.05.24 03:25:52

적용해 보니까 진짜 좋네요~~
좋은 팁 감사합니다..

꽃다방김군 자기소개 아이디로 검색 회원게시물

그누4 팁자료실

본문

공유하기

댓글 36개