2018년 9월 26일 수요일

Spring 프로젝트에서 ckEditor를 이용해서 이미지 업로드 구현

Written by   on   in   with 댓글 1개

1. 기본 셋팅

  1. 사이트
  2. 설치
    • 다운로드 사이트에 접속해서 Full Package 를 다운받는다.
    • 압축을 해제한다.
    • 압축해제한 폴더를 webapp 폴더에 resources폴더를 만들고 복사한다.
  3. 리소스 폴더 매핑
    • ckeditor폴더의 리소스를 매핑하는 부분을 설정한다.
    4. <mvc:resources mapping="/resources/**" location="/resources/" />
  4. 기본 에디터 셋팅
    <!DOCTYPE html>
<html lang="ko">
<head>
 <script src="/resources/ckeditor/ckeditor.js"></script>
    <script>
    window.onload = function(){
       ck = CKEDITOR.replace("editor");
    };
    </script>
</head>
<body>
    <form>
        <textarea name="editor1" id="editor1" rows="10" cols="80">
            This is my textarea to be replaced with CKEditor.
        </textarea>
    </form>
</body>
</html>

2. 이미지 기본 업로드

  1. ckEditor config 설정을 변경한다.
    2. <script src="/resources/components/ckeditor/ckeditor.js"></script>
<script>
    var editorConfig = {
        filebrowserUploadUrl : "/ckEditor/imgUpload", //이미지 업로드
    };

    CKEDITOR.on('dialogDefinition', function( ev ){
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;

        switch (dialogName) {
            case 'image': //Image Properties dialog
            //dialogDefinition.removeContents('info');
            dialogDefinition.removeContents('Link');
            dialogDefinition.removeContents('advanced');
            break;
        }
    });
 window.onload = function(){
      ck = CKEDITOR.replace("editor", editorConfig);
 };
</script>
  2. 리소스 폴더 매핑
    파일 저장을 아래와 같이 설정 했을 경우
    3. //파일 기본경로
String defaultPath = request.getSession().getServletContext().getRealPath("/");
//파일 기본경로, 상세경로
String filePath = defaultPath + "resources" + File.separator + "ckEditorImg" + File.separator;
    파일을 저장한 위치와 요청한 url을 매칭시키는 설정을 추가한다.
    <mvc:resources mapping="/ckEditorImg/**" location="/resources/ckEditorImg/" />
  3. 서버에서 아래의 형식에 맞게 JSON으로 응답한다.

3. 드래그 이미지 업로드

  1. add-on 설치
    upload image 애드온은 '드래그앤드롭'을 가능하게 해주고, 나머지는 종속되는 프로그램
    프로그램을 다운받아서 ckeditor/plugins 디렉토리에 넣는다
  2. ckEditor config 설정을 변경
    <script src="/resources/components/ckeditor/ckeditor.js"></script>
<script>
    var editorConfig = {
         filebrowserUploadUrl : "/ckEditor/imgUpload?type=image", //이미지만 업로드
         extraPlugins : 'uploadimage'
    };
 
 
    CKEDITOR.on('dialogDefinition', function( ev ){
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;
 
        switch (dialogName) {
            case 'image': //Image Properties dialog
            //dialogDefinition.removeContents('info');
            dialogDefinition.removeContents('Link');
            dialogDefinition.removeContents('advanced');
            break;
        }
    });
 
    window.onload = function(){
         ck = CKEDITOR.replace("editor", editorConfig);
    };
</script>
Share:

댓글 1개:

  1. ruru2018년 11월 19일 오후 12:02

    잘 보았습니다. 그런데 자바 코딩 부분을 완전히 보여주실 수 있을까요?

    답글삭제