메뉴 건너뛰기

조회 수 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
번호 제목 날짜 조회 수
43 첫 실행 URL 변경 file 2018.06.05 2715
42 전자정부프레임워크 설치 및 실행 file 2018.12.07 1381
41 전자정부프레임워크 사용 중 중복 저장 방지 (새로고침 혹은 뒤로가기시) 2018.06.12 3053
40 전자정부프레임워크 구조 파악하기 file 2018.06.02 4117
39 전자정부표준프레임워크 파일 업로드 크기 설정(feat. MaxUploadSizeExceededException) file 2019.02.28 1101
38 전자정부 프레임워크(eGovframe) 동적 웹프로젝트 시작하기(2) file 2017.09.12 4165
37 전자정부 프레임워크(egov framework) 설치하기(1) file 2017.09.12 5296
36 전자정부 표준프레임워크 파일업로드용량설정 file 2018.12.06 1891
35 이클립스에서 인코딩 설정 file 2018.06.21 2330
34 이클립스(Eclipse) 한글 언어팩 설치. Babel 프로젝트 file 2018.12.07 1199
33 이클립스(Eclipse) 소스 일괄 수정 file 2018.12.07 1097
32 이클립스 파일 찾기 & 문자열 검색 file 2018.06.21 2405
31 예제 따라하기(1) - 기본 서블릿 구현 file 2018.06.05 2922
30 스프링프레임워크 <form:form> 태그 사용법 file 2018.12.06 1182
29 스프링프레임워크 <form:form> 태그 사용법 file 2019.02.28 3514
» 스프링 CKEditor 적용 - 에디터 2018.06.12 5569
27 서버로부터 메시지 받아서 팝업 띄우기 (1. ModelAndView 이용) file 2021.03.09 574
26 로그인 체크 인터셉터 사용 (AuthenticInterceptor) 2016.09.21 6674
25 공통코드관리 2016.09.21 5760
24 개발자로서 기본 구성합니다. file 2016.08.18 4937
Board Pagination Prev 1 2 3 Next
/ 3

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved