※ 참고 : 이 포스팅은 SmartEditor Basic을 기준으로 작성되었습니다.
■ 네이버 스마트 에디터 세팅하고 사용하기
01. https://github.com/naver/smarteditor2 사이트에 접속하여 smarteditor2-master.zip 파일을 다운로드 받는다.
02. 다운받은 smarteditor2-master.zip 파일의 압축을 해제한뒤 파일명을 smarteditor로 변경하였다.
03. 생성된 smarteditor 프로젝트에서 board.php 파일을 생성한다.
04. board.php 파일의 소스코드는 아래와 같다.
board.php
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Naver :: Smart Editor 2</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function submitContents(elClickedObj) {
// 에디터의 내용이 textarea에 적용됩니다.
oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
// 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
try {
elClickedObj.form.submit();
} catch(e) { }
}
</script>
</head>
<body>
<form action="view.php" method="post" accept-charset="utf-8">
<b>제목 :</b> <input type="text" id="title" name="title" style="width:680px;"/>
<div style="height:10px;"></div>
<div style="width:750px;">
<?php
include_once("./workspace/SmartEditor2.html"); // 스마트 에디터를 include 한다.
?>
<div style="height:20px;"></div>
<div align="center">
<input type="button" value="등록" onClick="submitContents(this);"/>
</div>
</div>
</form>
</body>
</html>
|
05. 다음으로 workspace폴더로 이동하여 include를 사용하여 가져올 SmartEditor2.html 파일을 수정해야 한다.
06. SmartEditor2.html 파일의 수정사항은 아래와 같다.
① 파란색으로 강조되어 있는 부분은 수정한 내용이다.
② 빨간색으로 강조되어 있는 부분은 삭제해도 된다.
SmartEditor2.html
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>네이버 :: Smart Editor 2 ™</title> <!-- 인클루드를 할 것이기 때문에 HuskyEZCreator.js의 연결경로를 절대경로로 변경한다. -->
<script type="text/javascript" src="http://localhost/smarteditor/workspace/js/service/HuskyEZCreator.js" charset="utf-8"></script>
</head>
<body>
<!--form action="sample/viewer/index.php" method="post"-->
<textarea name="ir1" id="ir1" rows="10" cols="100" style="width:766px;height:412px;display:none;"></textarea>
<!--textarea name="ir1" id="ir1" rows="10" cols="100" style="width:100%; height:412px; min-width:610px; display:none;"></textarea-->
<!--p>
<input type="button" onclick="pasteHTML();" value="본문에 내용 넣기" />
<input type="button" onclick="showHTML();" value="본문 내용 가져오기" />
<input type="button" onclick="submitContents(this);" value="서버로 내용 전송" />
<input type="button" onclick="setDefaultFont();" value="기본 폰트 지정하기 (궁서_24)" />
</p-->
<!--/form-->
<script type="text/javascript">
var oEditors = [];
var sLang = "ko_KR"; // 언어 (ko_KR/ en_US/ ja_JP/ zh_CN/ zh_TW), default = ko_KR
// 추가 글꼴 목록
//var aAdditionalFontSet = [["MS UI Gothic", "MS UI Gothic"], ["Comic Sans MS", "Comic Sans MS"],["TEST","TEST"]];
nhn.husky.EZCreator.createInIFrame({
oAppRef : oEditors
, elPlaceHolder : "ir1" // 인클루드를 할 것이기 때문에 SmartEditor2Skin.html의 연결경로를 절대경로로 변경한다.
, sSkinURI : "http://localhost/smarteditor/workspace/SmartEditor2Skin.html"
, htParams : {
bUseToolbar : true // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
, bUseVerticalResizer : true // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
, bUseModeChanger : true // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
// , bSkipXssFilter : true // client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
// , aAdditionalFontList : aAdditionalFontSet // 추가 글꼴 목록
, fOnBeforeUnload : function() {
//alert("완료!");
} , I18N_LOCALE : sLang
} // boolean
, fOnAppLoad : function(){
//예제 코드
//oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
}
, fCreator : "createSEditor2"
});
/*
function pasteHTML() {
var sHTML = "<span style='color:#FF0000;'>이미지도 같은 방식으로 삽입합니다.<\/span>";
oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
}
*/
/*
function showHTML() {
var sHTML = oEditors.getById["ir1"].getIR();
alert(sHTML);
}
*/
/*
function submitContents(elClickedObj) {
oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []); // 에디터의 내용이 textarea에 적용됩니다.
// 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
try {
elClickedObj.form.submit();
} catch(e) {}
}
*/
/*
function setDefaultFont() {
var sDefaultFont = "궁서";
var nFontSize = 24;
oEditors.getById["ir1"].setDefaultFont(sDefaultFont, nFontSize);
}
*/
</script>
</body>
</html>
|
07. 다음으로 스마트 에디터의 스킨내용이 담겨있는 SmartEditor2Skin.html 파일을 수정한다.
08. SmartEditor2Skin.html 에서 수정할 내용은 화면에 띄워지는 스마트 에디터의 버전 정보를 삭제하는 것 뿐이다.
SmartEditor2Skin.html
|
~ 기타 코드 생략 ~
<!--Remove End-->
</head>
<body>
<!-- 화면에 버전 정보가 표시되는것을 지운다. -->
<!--span id="rev">Version: 2.9.0.4a256db</span-->
<!-- SE2 Markup Start -->
<div id="smart_editor2">
<div id="smart_editor2_content"><a href="#se2_iframe" class="blind">글쓰기영역으로 바로가기</a>
~ 기타 코드 생략 ~
|
09. 마지막으로 smarteditor 폴더로 돌아와서 view.php 파일을 생성한다.
10. view.php 파일의 내용은 아래와 같다.
view.php
|
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
|
11. 이제 board.php 파일을 열고 정상적으로 작동되는지 테스트 해보자.
12. 그럼 아래와 같이 view.php에 작성내용이 정상적으로 나타나면서 작업이 완료 되었다.
