스프링 이미지게시판 - div 태그 contentEditable 기능

이번 포스팅은 간단하게 내가 지금 어떤 고민을 하는지 기록해두기 위해서다.

 

지금 나는 학원 파이널 프로젝트로 Spring framework 를 통한 웹사이트를 개발하고 있는데,

 

한 사이트에 이벤트(행사) 페이지를 맡아서 진행중이다. 

 

당연히 이벤트 페이지같은 경우 이미지의 비중이 굉장히 큰만큼, 스타벅스같은 사이트처럼 이미지 위주의 페이지로 꾸며보고 싶었고,

 

본문내용과 이미지를 함께 쓸 수 있도록 구현해야했다.

 

이미지 없이 text 로만 CRUD 기능은 구현했지만, 이미지를 활용하기 위해 textarea 를 다른 방향으로 바꿔서 

 

에디터형식? 블로그? 처럼 이미지와 텍스트를 함께 표시하고 싶었다.

 

그러다 찾은데 <div> 태그에 contentEditable 이라는 기능이다. 

이 기능이 참 재밌는게 이 기능하나로 블로그처럼 에디터의 효과를 적용할 수 있는 방향성이 넓어지고,

 

이미지와 텍스트를 함께 담을 수 있다는게 장점이다.

 

다만, 이걸로 해야겠다 찾아보는 중에 이 기능이 <form> 태그에 post submit 을 통해서 값의 전달이 되지않아,

 

이를 textarea 나 input 으로 담아서 controller 로 보내야하는 상황이고,, 지금 이를 해결하기 위해 고민중이다 . ㅠㅠ

위 사진처럼 NULL로 인식되는데 이부분을 찾아보니 contentEditable 을 사용한 content 부분이 NOT NULL이라 에러

 

 

 

-- 추가

 

이 기능을 쓰기엔 옵션을 직접추가해야해서 부족한점이 많은 것 같다.

그래서 결국 라이브러리를 쓰기로 결정 ! 

 

웹 에디터 라이브러리를 골라 사용해서 처리했다. 

요새 페이스북에서 출시한 새로운 웹 에디터가 있던데 한번 써볼기회가 생기면 써봐야겠다!