CMS 라이믹스(XE) 오픈 자료실 보관 자료실 상품제안 제품매뉴얼 모듈 매뉴얼 버전 관리 관련사이트 워드프레스 그누보드 카페24 고도몰 제로보드4 CGI

제로보드4에 네이버 스마트에디터 달기...

2016년 10월 16일

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파일에 붙여넣습니다.