1. 관련링크1를 참조하여 스마트에디터를 다운로드 합니다.

2. 압축을 해제한 후 홈페이지 계정/bbs/SmartEditor로 업로드 합니다.

3. 적용하고자 하시는 스킨의 write.php파일을 에디터로 여세요.

4. 가장 윗부분에 아래의 소스를 붙여 넣으세요.

<script type="text/javascript" src="SmartEditor/js/HuskyEZCreator.js"></script>

5. 아래의 소스를 찾으셔서 value값을 수정하세요.

<?=$hide_html_start?><input type=checkbox name=use_html checked <?=$use_html?> value=2>HTML 사용<?=$hide_html_end?>

6. 기본 스킨 기준으로 아래의 소스를 수정하세요.

<textarea name=memo <?=size2(90)?> rows=18 class=textarea style=width:99%><?=$memo?></textarea>

<textarea name=memo id="ir1" <?=size2(90)?> rows=18 class=textarea style='width:99%;'><?=$memo?></textarea>

7. 작성완료 부분을 아래처럼 이벤트를 추가해주세요.

<input type=image src=<?=$dir?>/submit.gif accesskey="s" onfocus='this.blur()' alt=확인 onClick="_onSubmit(this);">

8. 제일 하단에 아래의 소스를 추가합니다. (진한 부분의 소스는 클립보드에 복사하는 소스로 필요없으시면 삭제하시면 됩니다.)

<script>
 var oEditors = [];
 nhn.husky.EZCreator.createInIFrame(oEditors, "ir1", "SmartEditor/SEditorSkin.html", "createSEditorInIFrame");

 // var oEditors = [];
 // 마지막 옵션은 체감 속도 증진을 위해서 페이지 로딩 완료시 까지 화면 표시를 하지 않는 옵션 입니다. 
 // 개발 작업시에는 이 값을 false로 설정 하세요.
 // nhn.husky.EZCreator.createInIFrame(oEditors, "ir1", "SmartEditor/SEditorSkin.html", "createSEditorInIFrame", null, true);

 // 복수개의 에디터를 생성하고자 할 경우, 아래와 같은 방식으로 호출하고 oEditors.getById["ir2"]이나 oEditors[1]을 이용해 접근하면 됩니다.
 // nhn.husky.EZCreator.createInIFrame(oEditors, "ir2", "SEditorSkin.html", "createSEditorInIFrame", null, true);

 function pasteHTMLDemo(){
  sHTML = "<span style='color:#FF0000'>이미지 등도 이렇게 삽입하면 됩니다.</span>";
  oEditors.getById["memo"].exec("PASTE_HTML", [sHTML]);
 }

 function showHTML(){
  alert(oEditors.getById["memo"].getIR());
 }

 function _onSubmit(elClicked){
  // 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어 줍니다.
  oEditors.getById["ir1"].exec("UPDATE_IR_FIELD", []);

<? if(!$member[no]) { ?>
if(!document.getElementById("name").value)
{return false;}
if(!document.getElementById("password").value)
{return false;}
<? } ?>
<? if($setup[use_category]) { ?>
var myindex=document.writｅ.category[1].selectedIndex;
if (myindex<1)
{
alert('카테고리를 선택해 주세요.');
return false;
}
<? } ?>
  if(!document.getElementById("subject").value) {return false;}
  if(!document.getElementById("ir1").value) {alert('내용을 입력해 주세요.');return false;}

  var buf = document.getElementById("ir1");
  var Range = buf.createTextRange ();
  Range.execCommand ("Copy");
  alert("작성하신 글이 클립보드에 복사되었습니다.");
  
  // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
  try{
   elClicked.form.submit();
  }catch(e){}
 }
</script>

9. 스마트에디터를 잘 적용하기위해서 스타일을 적용시켜주어야 합니다. 스킨의 setup.php를 열고 아래와 같이 수정합니다. (또는 style.css파일에 해당 항목만 추가를 하셔도 됩니다. 아래의 팁은 해당 style.css파일만 수정하는 방법입니다.)

.smartOutput{ font-size:12px; line-height:1.6; font-family:굴림, AppleGothic, Sans-serif;} /* 스마트 에디터의 풍부한 표현이 정상적으로 출력되도록 하려면 콘텐츠가 출력되는 곳에 이 클래스를 적용하여야 한다. 예를 들면 게시물 읽기 페이지의 본문이 이에 해당된다. */

.smartOutput p{ margin-top:7px; margin-bottom:7px;}

.smartOutput blockquote.q1,
.smartOutput blockquote.q2,
.smartOutput blockquote.q3,
.smartOutput blockquote.q4,
.smartOutput blockquote.q5,
.smartOutput blockquote.q6,
.smartOutput blockquote.q7{ padding:10px; margin-left:15px; margin-right:15px;}

.smartOutput blockquote.q1{ padding:0 10px; border-left:2px solid #ccc;}
.smartOutput blockquote.q2{ padding:0 10px; background:url(../img/bg_qmark.gif) no-repeat;}
.smartOutput blockquote.q3{ border:1px solid #d9d9d9;}
.smartOutput blockquote.q4{ border:1px solid #d9d9d9; background:#fbfbfb;}
.smartOutput blockquote.q5{ border:2px solid #707070;}
.smartOutput blockquote.q6{ border:1px dashed #707070;}
.smartOutput blockquote.q7{ border:1px dashed #707070; background:#fbfbfb;}

.smartOutput sup{ font:10px Tahoma;}
.smartOutput sub{ font:10px Tahoma;}
.smartOutput table td{ padding:4px;}

이 소스를 style.css파일에 붙여넣습니다.

또는 setup.php파일(또는 view.php파일)에서 

<link rel="stylesheet" type="text/css" href="../../SmartEditor/css/style.css" />

이런 식으로 해주시면 되겠죠.

10. 그리고나서 스킨의 view.php파일을 열고, <?=$memo?>를 찾아줍니다. 아마 이 변수는 테이블에 둘러쌓여 있는데, 여기에 클래스를 지정해주시면 됩니다.

<td><?=$memo?></td>인 경우

<td class="smartOutput"><?=$memo?></td>

11. 잘 적용이 되었는지 테스트해보시기 바랍니다.

기타 문의사항은 Web Q&A에 올려주시기 바랍니다.

진도 프레임웍은 이 곳에서 다운로드 : http://dev.naver.com/projects/jindo/download

태그가 적용이 안되신다면, 게시판 설정에서 html 사용권한의 레벨을 확인해보세요~