chap 22 - ★스마트에디터( 파이널에 사용 )

네이버에서 제공하는 open API 를 사용한다.

 

text 문서에 순서대로 설명이 되어 있다.

잘 보고 순서대로 하면 쉽게 할수가 있다.

 

 

 

이제 쓸곳으로 간다.

[ add.jsp ]

#153. 번부터 스마트 에디터 시작이다.

 

 

위에 부분에 스마트에디터가 추가되는 것이다.

 

 

스마트에디터에서 아무것도 안쓰면 <p>&nbsp;</p> 로 나오는데 유효성 검사할때 글을 입력하도록 바꾼다.

그리고 <p> 태그를 <br> 로 바꾸어 준다.

 

 

글을 작성하고 수정을 눌렀을 경우 똑같이 스마트에디터로 사용가능 하도록 해주어야 한다.

 

[ edit.jsp ]

방법은 글쓰기 할때와 동일하다.

이제 글쓰기를 해보고 저장 했더니 아래처럼 나왔다...

 

태그를 보니 <>나오지 않고 이상하게 나오는 이유는 우리가 크로스사이트 공격대비할때 < 를 &it; 로 해두었기 때문이다.

다시 원상복구 해주어야 한다.

 

크로스사이트 공격 대비를 해준곳으로 간다.

 

[ BoardController.java ]

MyUtil 로 간다.

 

[ MyUtil.java ]

위와 같이 잘 나온다.

 

글을 수정 했을때에도 잘 나온다~~~~~~~~~~~~~~~~~~~~

 

이제 사진을 첨부해 보자~~~~

 

photo_uploader.html 을 꼭 보아야 한다.

위에 부분을 잘 보자.

 

 

[ attach_photo.js ]

사진을 복수개를 올리기 위해서는~~ 수정을 해주어야 한다.

위에 sUrl: 부분은 파이널 할때 바꾸어야할 곳이다.

sUploadURL 도 파이널 할때 바꾸어야 한다.

 

 

사진첨부를 위한 VO를 만들어야 한다.

 

위에 private 에 대해 get , set 을 하면 된다.

 

MultipartFile 은 파일 첨부 할때 사용한 곳이다.

 

[ FileManager.java ]

 

위를 사요하기 위해서는 maven 에서 다운을 받아와서 사용하여야 한다.

위에는 네이버에서 지정해 놓은 것이다.

 

 

이제 text 문서에서 12번을 보면 된다.

 

[ BoardController.java ]

#155. 부분을 보면 된다. text 문서에서 복사해와서 붙여넣은 것이다.

 

 

글쓰기에서 사진을 올려 보았다. 경로를 확인해 보자.

 

 

photo_upload 파일이 생성 되었고

 

이렇게 파일이 들어와 있다.