그런데, 예전에는 제법 많은 무료 에디터들이 있었지만, 이젠 거의 개발이 중단되었거나, 유료화 되어 버려 아쉽다. (네이버와 다음에서 공개한 에디터들을 많이 썼지만, 지금은 거의 업데이트가 안되고 있다.)
뭐, 돈많은 개발자들이야 좋은 유료 에디터를 갖다 쓰겠지만... ㅠㅠ... 돈이 없으니, 아쉬운대로 무료 에디터를 찾아 써야 한다.
그 중에서 무려 "국내" 개발진에서 개발하고 있는 무료 에디터가 있으니, "Summernote" 이다.
배포처 : http://summernote.org/
디자인도 성능도 여타 다른 에디터에 뒤지지 않는다.
쓰는 방법도 간단한데, 간단이 위의 다운로드 이미지를 클릭해서 다운 받거나...
"Getting Started" 페이지로 이동해 거기서 "Downloaded compiled" 버튼을 클릭해 다운 받아도 된다. 두 곳의 다운로드 파일은 약간의 차이가 있는데...
초기 페이지에서 다운 받을수 있는 파일 "summernote-master.zip" 는 기능 파일과 예제가 포함되어 있는 파일이고, 다운로드 페이지에서 받을수 있는 파일인 "summernote-0.8.4-dist.zip" 는 기능파일만이 포함되어 있는 파일이다.
물론 "summernote-master.zip" 에서 기능 폴더인 "dist" 폴더만 갖다 써도 된다. 어차피 같은 파일이니까. 하지만, "summernote-0.8.4-dist.zip" 에 있는 파일이 약간이나마 용량이 적으니, 실 서버에 사용할 때는 그쪽을 이용하는 것이 좋을 것이다.
에디터를 사용하려면, 사용하려는 페이지에 다운 받은 파일들을 복사해 넣은 후, jQuery 와 bootstrap 을 링크 시켜 줘야 한다.
그런 다음에는 에디터를 적용할 <div> 의 id 를 지정하여 주기만 하면 끝.
이렇게 하고 페이지를 로드해 보면...
이렇게 에디터가 적용이 된다.
적용이 되기는 하는데, 기본 크기가 너무 작으니 좀 키워 보자.
이렇게 초기 값을 지정해 놓고 다시 페이지를 로드해 보면...
이렇게 높이가 커진 에디터를 볼수 있다.
이 에디터에서 작성한 내용을 C# 에서 받아 볼려면, 여러가지 방법이 있겠지만, 제일 간단한 방법으로 <hidden> 필드를 이용하는 것을 추천한다.
이렇게 HiddenField 를 하나 두고, 버튼을 클릭시 자바스크립트를 이용해서 summernote 의 값을 세팅해두면...
이렇게 비하인드 코드에서 썸머노트의 값을 가져 올수 있다.
반대로 비하인드 코에서 썸머노트에 내용을 로드하게끔 할수도 있는데...
이렇게 초기화 함수에 히든필드 값을 읽어 오도록 지정해 놓고...
이렇게 비하인드 코드에서 히드필드의 값을 지정하면 ...
이렇게 특정 값이 세팅되게 할수도 있음.
이제 이렇게 하고, DB 연결만 해주면 게시판은 쉽게 만들수 있음.
