이온디
9년 전
Posted at 2009/02/12 11:32
[ by Lovelet ]
1. 관련링크1를 참조하여 스마트에디터를 다운로드 합니다.
2. 압축을 해제한 후 홈페이지 계정/bbs/SmartEditor로 업로드 합니다.
3. 적용하고자 하시는 스킨의 write.php파일을 에디터로 여세요.
4. 가장 윗부분에 아래의 소스를 붙여 넣으세요.
<script type="text/javascrip…
Posted at 2009/02/12 11:32
[ by Lovelet ]
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 사용권한의 레벨을 확인해보세요~
http://dev.naver.com/projects/smarteditor/download
인쇄하기
덧글(2)
Commented by epikfan.co at 2009-07-29 08:50:32
감사합니다^6
다른님들 거 보면 계속 내용입력하라그러는데 작성완료가 문제였군요^^ 아무튼 감사합니다^6
IP 115.161.76.XXX
Commented by fuzzionkai at 2009-10-30 12:44:50
안녕하세요. 올려주신 방법 보고 잘 올렸는데요. 이미지박스는 삽입이 안되요. --; 하하. 좀더 공부해야겠어요
