네이버스마트에디터 시작하기

김상혁·2021년 4월 14일
0

기능 모아두기

목록 보기
3/6

Spring Boot 프로젝트에 스마트에디터 시작하기

  1. 스마트에디터 깃허브에서 zip파일을 받는다.
    ▶ 2.10.0 버전은 오류가 나므로 2.92 버전 다운로드
    스마트에디터 네이버 깃허브

  1. 압축풀기 && dist 내부 파일 복사
    (경로 : smarteditor2-2.9.2\smarteditor2-2.9.2\dist)

  1. dist 내부 파일 붙여넣기
    (추천 경로 : src\main\resources\static\libs\smarteditor
    --> libs 폴더부터는 없으면 만들어주기 )

  1. 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>

  1. 데이터 전송 버튼 추가하기
<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>

<<적용 후 화면>>

0개의 댓글