9. 스마트에디터 + 비디오태그 게시판 실습

먼저 스마트 에디터를 eclipse에 넣어 주시고,

jsp페이지(view)에서 경로를 설정해 줍니다.

본인은 resources라는 폴더 내에 smarteditor2-master폴더를 넣었습니다.

그 다음으로는 기능을 담당해줄 script를 만들도록 하겠습니다.

smarteditor2의 공삭사이트에서도 찾을 수 있고

그 외에도 간단한 검색으로 여러 코드를 찾을 수 있습니다.

<script>
	$(function() {
		//전역변수선언
		var editor_object = [];

		nhn.husky.EZCreator
				.createInIFrame({
					oAppRef : editor_object,
					elPlaceHolder : "detail",
					sSkinURI : "../resources/smarteditor2-master/workspace/SmartEditor2Skin.html",
					htParams : {
						// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
						bUseToolbar : true,
						// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
						bUseVerticalResizer : true,
						// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
						bUseModeChanger : true,
					}
				});

		//전송버튼 클릭이벤트
		$("#savebutton").click(function() {
			//id가 smarteditor인 textarea에 에디터에서 대입
			editor_object.getById["detail"].exec("UPDATE_CONTENTS_FIELD", []);

			// 이부분에 에디터 validation 검증

			//폼 submit
			$("#frm").submit();
		});
	});
</script>

여기서 중요한것은 12번줄의 SmartEditor2Skin.html의 경로와

26번줄의 detail(textarea의 id)입니다.

다음은 table의 코드입니다

	

	
		
내 용
		

						
		
동영상
			


		

			

			 
			
			    
			목록으로
			
			
		
		
	

4번줄의 enctype="multipart/form-data"는 비디오 태그를 위한 부분으로,

12번줄처럼 input type="file"을 사용하기 위해 반드시 명시해줘야 합니다.

9번줄의 textarea 부분과 17번줄의 submit, function(savebutton) 부분은 스마트 에디터와 관련된 부분입니다.

모두 빠짐없이 작성 해 주시기 바랍니다.

다음은 Controller 부분을 설명드리기에 앞서 

스마트 에디터로 작성한 부분이 어떻게 출력되는지 보여드리도록 하겠습니다.

detail.jsp(view) 화면입니다

내 용
			
${ n.detail }

에디터가 출력 된 화면입니다.

11111

22222

33333

44444

55555

db에 저장된 detail의 값입니다

11111
22222
33333
44444
55555

상기 코드를 보시면 알겠지만

스마트 에디터의 설정은 크게 어렵지 않습니다.

한가지 숙지하셔야 할 점은,

입력한 데이터를 파라미터 값으로 db로 넘겼을때는 html코드가 포함되어 있습니다.

그러니 데이터를 출력하실때 잘 판단하셔서 코딩을 하시기 바랍니다.

만약 이러한 html부분을 전부 없애고 싶으시다면 정규식을 사용하시면 됩니다.

<(/)?([a-zA-Z]*)(\\s[a-zA-Z]*=[^>]*)?(\\s)*(/)?>

/** * 모든 HTML 태그를 제거하고 반환한다. * * @param html * @throws Exception */ public String removeTag(String html) throws Exception { return html.replaceAll("<(/)?([a-zA-Z]*)(\\s[a-zA-Z]*=[^>]*)?(\\s)*(/)?>", "") }

정규식에 대한 더 자세한 설명은 추후에 다루도록 하겠습니다.

이제 Controller 부분을 살펴보도록 하겠습니다.

        @RequestMapping(value="/noriterInsert.do", method=RequestMethod.GET)
	public String noriterInsertForm() {

		return "noriter/noriterInsert";
	}

	@RequestMapping(value="/nInsert.do", method = RequestMethod.POST)
	public ModelAndView noriterInsert(Noriter noriter, ModelAndView mv
			,HttpServletRequest request, HttpSession session) throws Exception{
		
		String path = request.getRealPath("/video");
		int num = noriter.getClassNo();
		String filename = noriter.getVideo().getOriginalFilename();
		long sctm = System.currentTimeMillis();	//파일명 중복제거를 위한 작업
		
		try {
			noriter.getVideo().transferTo(new File(path+"/"+sctm+"_"+filename));
		}catch (IOException e) {
			e.printStackTrace();
		}
		
		//파일 경로 설정 확인 및 command에 넣어줌(Notice notice 같은것을 command라고 부른는 듯 합니다)
		System.out.println("videopath : " +path+"/"+sctm+"_"+filename);
		noriter.setVideopath(path+"/"+sctm+"_"+filename);
		
		System.out.println("videoname : "+sctm+"_"+filename);
		noriter.setVideoname(sctm+"_"+filename);
		
		//서비스 메소드 실행하고, 결과 받기
		noriterService.noriterInsert(noriter);
		//받은 결과에 따라 뷰 선택
		mv.setViewName("redirect:/noriter/noriterList.do");

		return mv;
	}

Spring에서 파일을 업로드 하는 방법은 여러가지가 있는데

주로 사용되는 방법 3가지는

1. Command 객체를 사용하는 방법

2 MultipartRequest를 사용하는 방법

3. Requestparam을 사용하는 방법

이정도가 있습니다

상기 코드는 Command 객체를 이용한 방법인데, 게시판을 만드는 개발자에 따라서 저 3가지 말고도

Command 객체, List<T> 제네릭, HashMap<T> 등의 사용에 따라 코딩방식이 또 나뉘게 되고

그 안에서도 레퍼런스를 가지는가 그렇지 않은가, ModelAndView인가 Model인가, FileUtils로 따로 관리할지, CommonUtils도 추가로 만들지 등등.. 

본인이 찾아서 해본 방법만 10가지는 되었던 것 같습니다.

제가 Command객체를 사용하는 방법을 택한것은 단순히 필요에 의해서일뿐 어느것이 더 좋은 방식인지에 대해서는 판단하기 어려운 문제인 것 같습니다.

검색을 해보신다면 다양한 벙법을 발견하실 수 있을거라 생각됩니다.

다만 많은 양의 데이터를 다루는 프로젝트를 진행중인 경우에 한해서라면 정답이 정해져 있다고 생각합니다.

참고: 

http://consistentcoder.com/spring-4-mvc-file-upload-example

http://gangzzang.tistory.com/entry/%EC%8A%A4%ED%94%84%EB%A7%81Spring-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9CFile-Upload

http://addio3305.tistory.com/83

http://wiki.gurubee.net/pages/viewpage.action?pageId=6261117

http://blog.naver.com/marnet/220303851057

http://bluejames77.blog.me/220053857681

http://blog.naver.com/rokking1/220930610610

https://okky.kr/article/386045

http://mkil.tistory.com/273

http://blog.naver.com/PostView.nhn?blogId=tkddlf4209&logNo=220579290882

잡설이 길었는데, 어쨋든 상기 코드는 파일업로드 기능 + Service(비즈니스로직) 호출 기능 + View 리턴 기능 이렇게 3가지로 나뉩니다. 아래는 비디오 태그가 적용된 detail.jsp(view)입니다.

		

			
동영상
			

				
				
				
test video: video1
			
		

만약 크롭에서 비디오나 이미지를 로드하는것이 거부되었다는 메시지가 뜨면(F12로 확인 가능)

크롬아이콘 - 마우스 우클릭 - 속성 - 대상에  --allow-file-access-from-files를 추가하시면 해결됩니다.

혹은 이미지나 동영상을 다른 사이트에 올린 뒤 코드화시키고, 그 코드화 시킨 동영상 혹은 이미지의 src을 다시 가져오는 방법도 있습니다.

------------------------------------------------------------------------------------------------

추가로 해볼 만한 것 : 

- api를 뜯어서 그 안에 버튼을 만들고 그 버튼이 동영상파일 업로더 기능으로써 사용 + 그렇게 업로드 한 동영상이 바로 출력되는 기능

- 동영상 혹은 이미지를 업로드 하자마자 바로 볼 수 있는 기능(spring 이미지 업로드 바로 보기/ 이미지 미리보기)

참고 : 

http://kindtis.tistory.com/514

http://devofhwb.tistory.com/90