스프링 CKEditor 적용 - 에디터

* Smart Editor, WYSIWYG Editor(위지윅 에디터, what you see is what you get)

- 사용자가 현재 화면에서 보고 있는 내용과 동일한 html code를 생성하는 에디터

- 네이버, 다음 에디터, CKEditor, SummerNote 등

 

* CKEditor

- http://ckeditor.com

- Standard Package 다운로드

- 이미지 업로드를 위해서는 별도의 작업이 필요함

- 적용 예

 

 

* SummerNote

- http://summernote.org

- 이미지를 텍스트 형식으로 저장함, 이미지 링크 방식의 업로드를 위해서는 별도의 작업이 필요함

- 적용 예

1.  ckeditor 를 인식할 리소스를  설정한다.  예

	
	<!-- ckeditor 리소스 설정 -->
	<resources mapping="/ckeditor/**" location="/WEB-INF/views/ckeditor/" />
	
	

 

2 .

viw 페이지에서  자바스크립트 삽입

 

<!--   ckeditor 연결  -->
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>





<table>
<tr>
<td>내용</td>
<td class="span12">
<textarea rows="5" class="form-control" name="content"></textarea>
<!-- textarea 를 ckeditor 로 변경 시킴 -->
<script>
CKEDITOR.replace("content", {
	
	filebrowserUploadUrl :"/imageUpload.do"
   // filebrowserImageUploadUrl: 'MacaronicsServlet?command=ckeditor_upload'	
});
</script>


</tr>

<table>

 

3.  이미지 파일을 받을 컨트롤러를 따로 작성한다. 

 

@Controller
public class CkeditorUploadController {

	@RequestMapping(value="/imageUpload.do")
	public void imageUpload(HttpServletRequest request, HttpServletResponse response,
			 @RequestParam MultipartFile upload ) throws Exception{
		//CKEditor 에서 파일을 넘겨주는 이름이 upload 로 설정 되어 있다. 반드시 upload 로 설정
		//헤더 설정
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=utf-8");
		
		OutputStream out =null;
		PrintWriter printWriter =null;
		
		String fileName =upload.getOriginalFilename(); //첨부 파일 이름
		byte[] bytes =upload.getBytes(); //첨부파일을 바이트 배열로 저장
	    

		//String uploadPath ="업로드할 디렉토리 경로" + fileName; //물리적 실제 저장소
	    String uploadPath =UploadPath.path(request) +fileName;
		
	    out=new FileOutputStream(new File(uploadPath));
	    out.write(bytes); //서버에 파일 업로드
	    
	    
	    String callback =request.getParameter("CKEditorFuncNum");
	    
	    printWriter=response.getWriter();
	    //URL 상에서 볼수 있는 이미지 경로
	   // String fileUrl =request.getContextPath()+"/upload/"+ fileName;
	    String fileUrl ="/resources/upload/"+ fileName;
	    
	    String script="<script>window.parent.CKEDITOR.tools.callFunction(";
	    script +=callback;
	    script +=", '";
	    script +=fileUrl;
	    script +=" ' , '이미지를 업로드 했습니다.'";
	    script +=") </script>";
	    
	    printWriter.println(script);
	    printWriter.flush();
	    
	    
	}
	
	
	
	
	
}




public class UploadPath {

	public static String attach_path="resources/upload/";
	
	public static String path( HttpServletRequest request){
		String uploadPath ="/";
		try{
			
			String root_path =request.getSession().getServletContext().getRealPath("/");
				
			uploadPath=root_path+attach_path.replace('/', '\');;	  
			
			return uploadPath;
		}catch(Exception e){
			e.printStackTrace();
		
			return uploadPath;
		}
	}

}

 

4. CKEditor 옵션

 

<!-- html  변경  샘플 ex) -->
  CKEDITOR.replace( 'contents', {//해당 이름으로 된 textarea에 에디터를 적용 <-- 이거 이름 부분입니다.
            width:'100%',
            height:'600px',
        //    extraPlugins : 'youtube',
           //여기 경로로 파일을 전달하여 업로드 시킨다. 
            // JSP, PHP 공통입니다. 경로를 적당히 적어줍니다.
          
           filebrowserImageUploadUrl: '/user/modify/upload_receive_from_ck'	
            	
        });



<!-- CkEdior 에서 config.js 변경 예  -->

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';

	//1.모양을 적용하기 위해 위젯 설치
	//먼저 lineutils 와  widgetselection 설치 
	config.extraPlugins = 'widget';
	
	//먼저 widget 설치 부트스트랩 용 
	config.extraPlugins = 'btgrid';
	
	//부트스트랩 용
	config.extraPlugins = 'widgetbootstrap';


	
/*	// Simplify the dialog windows.
	config.removeDialogTabs = 'image:advanced;link:advanced';
	// Remove some buttons provided by the standard plugins, which are
	// not needed in the Standard(s) toolbar.
	config.removeButtons = 'Underline,Subscript,Superscript';
	
*/
	//코드 hightler
	
	config.extraPlugins = 'codesnippet';
	//config.extraPlugins = 'youtube';
	


	
};