|
소스를 톰캣의 Document Root 하위에 두고
commons-fileupload-1.1.jar를 tomcat_home/common/lib/ 에 두면 됩니다.
원본에서 필요한 기능만 추출하였고
로컬이미지를 선택할 때 서버로 파일 업로드하여 구현하였습니다.
업로드는 Commons-FileUpload를 사용하였습니다.
소스(board_write_process.jsp,board_modify_process.jsp,insert_image_process.jsp)에서
아래부분은 자신의 환경에 맞게 수정하셔야 합니다.
그럼 소스를 한번 살펴 볼까요!
1. 파일구조
압축을 풀면 다음과 같습니다.
ms_dhtml_editor 하위폴더는
2. 소스설명
./board_write.jsp
게시판 글쓰기 부분입니다.
아이프레임으로 컨트롤을 포함시킨다.
컨트롤에서 작성완료시 내용(content)를 받기 위해 textarea를 숨겨둔다.
자바스크립트로 작성완료시 컨트롤에서 html을 받아온다.
./ms_dhtml_editor/dhtml.jsp
에디터 컨트롤입니다.
html을 자동으로 만들어 주는 기능을 합니다.
이미지를 선택하기 위해 showModalDialog 팝업을 사용 하였습니다.
InsertImageUserDefined함수는 팝업에서 이미지 정보들을 넘겨 받습니다.
./ms_dhtml_editor/insert_image.jsp
이미지선택 팝업입니다.
제가 html로 만들었습니다.
URL선택시 이미지 정보들을 부모창으로 넘겨주고 종료합니다.
로컬파일을 선택하면 폼 정보들을 insert_image_process.jsp에 넘겨 이미지를 서버로 업로드처리합니다.
./ms_dhtml_editor/insert_image_process.jsp
이미지 업로드 처리하는 부분입니다.
업로드는 commons-fileupload 를 사용하여 구현 하였습니다.(파일 첨부 하였습니다.)
이미지를 temp로 업로드후 이미지 정보들을 부모창으로 넘겨주고 종료합니다.
./board_write_process.jsp
게시판 글쓰기 처리 부분입니다.
이미지 위치를 재 조정 한다.
(사용자가 작성완료를 하지 않을 경우가 있으므로 insert_image_process.jsp에서는 temp로 처리하고, 작성완료처리부분에서 이미지 디렉토리와 URL을 재조정한다.)
게시판 내용 db insert 처리한다.
./board_modify.jsp
게시판 글수정 부분입니다. 
디비에서 가져온 content를 textarea에 담고 에디터가 로더 될때 값을 넣어줍니다.
나머진 작성 처리와 동일합니다.
./board_modify_process.jsp
게시판 글수정 처리 부분입니다.
나머진 이미지와 기타팝업들입니다.(소스참고하세요.)
원본은 ms사이트에서 다운받은 예제입니다. | 
