[MVC] 웹 에디터 적용

1. 글쓰는 폼이 있는 .jsp 파일 ( 내 경우 bbsRegisterForm.jsp ) 

스크립트 부분에

<script src="//cdn.ckeditor.com/4.12.1/full/ckeditor.js"></script>

를 넣어주고

 

2. 내용을 입력받는 폼에

<td class="tbtd_content"><form:textarea path="description" id="description"  rows="7" cols="100"/>
	<script type="text/javascript">
		CKEDITOR.replace("description",{});	//이 부분을 넣어준다. description 부분에 위에 있는 id="~~~" 값을 일치하게 적어주면 된다.
	</script>
</td>
        
        
        

CKEDITOR.replace~~를 적어준다. {}안에는 옵션들을 설정할수있다 (예, 엔터 입력한경우 한 줄 아래로 등..)

 

3. 글쓰는 버튼 눌렀을떄 동작하는 함수 ( 내 경우 fn_register() )

var description= CKEDITOR.instances.description.getData()
	$("#registForm").append("");
	$("#registForm").attr("method", "POST");

description에 CKEDITOR.instances~~ 로 입력한 태그+내용을 저장한다. 저장 버튼을 누르면 데이터베이스에 태그+내용이 저장된다.

 

4. 설정한 대로 데이터 불러와 화면에 뿌려주기 ( 내 경우 bbsContent.jsp )

<tr>
	<td class="tbtd_caption">내용</td>
	<td class="tbtd_content">
		<c:out value="${sampleVO.description}" escapeXml="false"/></td>		//이 부분을 추가, escapeXml="false" 설정을 넣지 않으면 태그까지 내용으로 출력한다.
</tr>
        
        
        
        

value="~~~~" 안에는 자신의 내용데이터를 가지고 있는 VO를 입력해주면 되고 escapeXml="false"로 설정을 해주지 않으면 태그를 글로 그대로 출력하므로 escapeXml 설정을 false로 주어 태그가 적용되도록 해준다.