Spring Boot 프로젝트에 스마트에디터 시작하기
- 스마트에디터 깃허브에서 zip파일을 받는다.
▶ 2.10.0 버전은 오류가 나므로 2.92 버전 다운로드
스마트에디터 네이버 깃허브
- 압축풀기 && dist 내부 파일 복사
(경로 : smarteditor2-2.9.2\smarteditor2-2.9.2\dist)
- dist 내부 파일 붙여넣기
(추천 경로 : src\main\resources\static\libs\smarteditor
--> libs 폴더부터는 없으면 만들어주기 )
- jsp에 script 추가하기
<!-- 네이버 스마트에디터 -->
<!-- <head> 안에 추가 -->
<script type="text/javascript" src="/libs/smarteditor/js/service/HuskyEZCreator.js" charset="utf-8"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- 2.10.0 버전엔 js 파일 일부분이 없어 오류 발생 ! -->
'
5. 입력할 곳 추가하기
<body>
<textarea id="txtContent" rows="10" cols="100" style="width: 100%;"></textarea>
<!-- textarea 밑에 script 작성하기 -->
<script id="smartEditor" type="text/javascript">
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "txtContent", //textarea ID 입력
sSkinURI: "/libs/smarteditor/SmartEditor2Skin.html", //martEditor2Skin.html 경로 입력
fCreator: "createSEditor2",
htParams : {
// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
bUseToolbar : true,
// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
bUseVerticalResizer : false,
// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
bUseModeChanger : false
}
});
</script>- 데이터 전송 버튼 추가하기
<div id="se2_sample" style="margin:10px 0;">
<input type="button" onclick="save();" value="본문 내용 가져오기">
</div><!-- head 안에 추가 -->
<script>
function save(){
oEditors.getById["txtContent"].exec("UPDATE_CONTENTS_FIELD", []);
//스마트 에디터 값을 텍스트컨텐츠로 전달
var content = document.getElementById("smartEditor").value;
alert(document.getElementById("txtContent").value);
// 값을 불러올 땐 document.get으로 받아오기
return;
}
</script><<적용 후 화면>>
