메뉴 건너뛰기

조회 수 5569 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

* 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';
	


	
};

 


List of Articles
번호 제목 날짜 조회 수
23 전자정부 표준프레임워크 파일업로드용량설정 file 2018.12.06 1891
22 이클립스에서 인코딩 설정 file 2018.06.21 2330
21 Spring Security의 동작 방법 file 2018.06.21 4263
20 이클립스 파일 찾기 & 문자열 검색 file 2018.06.21 2405
19 CKEditor 사용 및 파일 업로드 적용 2018.06.12 3165
18 spring ckeditor 파일업로드 예제 (file upload) file 2018.06.12 4513
» 스프링 CKEditor 적용 - 에디터 2018.06.12 5569
16 전자정부프레임워크 사용 중 중복 저장 방지 (새로고침 혹은 뒤로가기시) 2018.06.12 3053
15 "알 수 없는 오류가 발생하였습니다." 라는 에러 메시지가 발생했을 때 대처법 2018.06.12 4137
14 예제 따라하기(1) - 기본 서블릿 구현 file 2018.06.05 2922
13 첫 실행 URL 변경 file 2018.06.05 2715
12 전자정부프레임워크 구조 파악하기 file 2018.06.02 4117
11 전자정부 프레임워크(eGovframe) 동적 웹프로젝트 시작하기(2) file 2017.09.12 4165
10 전자정부 프레임워크(egov framework) 설치하기(1) file 2017.09.12 5296
9 java.lang.NoClassDefFoundError: org/springframework/dao/support/PersistenceExceptionTranslator 2016.09.21 4160
8 HTMLTagFilter ? 2016.09.21 7747
7 로그인 체크 인터셉터 사용 (AuthenticInterceptor) 2016.09.21 6674
6 getFileNames() 메소드를 이용한 파일 업로드 기능 구현하기 2016.09.21 5802
5 getFileMap() 메소드를 이용한 파일 업로드 기능 구현하기 2016.09.21 6190
4 message 사용을 위한 설정 2016.09.21 6550
Board Pagination Prev 1 2 3 Next
/ 3

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved