스프링 MVC 적용 (다중 멀티 첨부 스마트에디터 게시판)

학원에서 스프링 MVC를 적용하여 프로젝트를 학생들이 하고 있는데 Ajax와 첨부파일을 적용하는 것이 어렵다고 하여 정리해 본다.

나의 작업환경은 다음과 같다.

1. 멀티 게시판 : 하나의 Article 데이터베이스 테이블에 여러 개의 게시판의 게시물을 한꺼번에 저장

  - 게시판 테이블 운영

  - ref, step, depth 체계를 가진 게시판

  - 네이버에서 공개한 스마트에디터 사용

  - 본문에 사진 추가 기능 사용

  - 첨부 파일은 5개 까지 적용 가능

  - 오라클 11g DBMS 사용 : Board, Article, PdsItem 테이블 및 각각의 sequence 운영

2. 스마트에디터에 대한 스프링 MVC 적용

  - 소스코드 위치 : src/main/webapp/resources/smarteditor

  - photo_uploader/popup/attach_photo.js 수정

    + html5Upload() function

      * 본문에 삽입되는 사진을 서버에 저장하기 위한 URL : /contextPath/board/file_uploader_html5 (내부적으로 Ajax 처리)

    + callFileUploader() function

      * sUrl : 'contextPath/board/file_uploader'

      * sCallback : 'resources/smarteditor/photo_uploader/popup/callback.html'

  - writeForm.js 수정 : 게시판 쓰기를 위한 jsp 파일의 javascript 파일

    + nhn.husky.EZCreator.createInIframe 수정

      nhn.husky.EZCreator.createInIFrame({

        oAppRef: editor_object,

        elPlaceHolder: "smarteditor",

        sSkinURI: ctx + "/resources/smarteditor/SmartEditor2Skin.html", 

        htParams : {

            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)

            bUseToolbar : true,             

            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)

            bUseVerticalResizer : true,     

            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)

            bUseModeChanger : true,

            fOnBeforeUnload : function(){

            }

         }

       });

    + 전송 버튼을 눌렀을 때 처리 : 가비지 컬렉션 처리를 위해 먼저 사진 파일에 대한 관리를 먼저하고, 이후 첨부파일에 대한 저장을 처리

      $("#addBtn").click(function(){

        //id가 smarteditor인 textarea에 에디터에서 대입

        editor_object.getById["smarteditor"].exec("UPDATE_CONTENTS_FIELD", []);

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

        var el = document.createElement('html');

        el.innerHTML = editor_object.getById["smarteditor"].elPlaceHolder.value;

        var imageF = el.getElementsByTagName('img');

        var url = ctx + "/board/file_uploader_real";

        var params = "";

        for(var i = 0;i < imageF.length;i++) {

          if(i == 0)

            params += ("src=" + imageF[i].src + "&title=" + imageF[i].title);

          else

            params += ("&src=" + imageF[i].src + "&title=" + imageF[i].title);

        }

        sendRequest(url, params, callbackFunction, "POST");

        callTimerProcessing();

      })

    

      function callTimerProcessing() {    // 사진에 대한 처리를 보장하기 위해 loop를 돌다, 응답이 오면 처리

    if(loop) {

      setTimeout(function() {

           callTimerProcessing();

          }, 100);

    }

    else {

          //폼 submit

          $("#frm").submit();

    }

      }

서버에서 처리는 다음에 ...