[JAVA, JAVASCRIPT] CKEditor 사용법 및 이미지 업로드 방법

웹사이트 게시판에 글을 입력하려고 보면 대부분 편집툴이 달려있습니다.

그 편집툴을 개발하기 위하여 CKEditor를 주로 이용하는데요,

CKEditor 다운로드, 사용법 그리고 이미지 업로드를 하는 방법까지 알아보겠습니다.

 

---

 

1. CKEditor 다운로드

CKEditor 다운로드 바로가기

CKEditor 4 - Download

 

 

2. 다운받은 경로 참조

<script language="javascript" src="/ckeditor/ckeditor.js"></script>

 

 

3. HTML 예제 코드

<textarea id="content" name="content" rows="40"></textarea>

<script>

    CKEDITOR.replace( 'content', {
    
    	filebrowserImageUploadUrl: '../uploadIMG.jsp'
        
    });
    
</script>

- textarea 태그를 만들고, CKEDITOR script를 적용합니다.

- filebrowserImageUploadUrl은 이미지를 업로드하는 코드를 연결한 것입니다.

 

 

4. CKEditor 설정 파일

- ckeditor 폴더 하위에 config.js 파일을 조작하면 원하는 형태로 편집툴을 꾸밀 수 있습니다.

 

 

5. 이미지 업로드 JAVA 코드 예제 (uploadIMG.jsp)

String returnValue = "";

String savePath = application.getRealPath("/") + "/upload/downImg/";
int sizeLimit = 5 * 1024 * 1024 ;  // 5 메가로 제한


if(request.getContentLength() > sizeLimit) {

    // 오류 메세지 (5MB 이상을 첨부한 경우)

} else {

    MultipartRequest multi = new MultipartRequest(request, savePath, sizeLimit, "utf-8", new DefaultFileRenamePolicy());

    //파라미터
    String fileName = multi.getFilesystemName("upload");  // 파일의 이름 얻기
    String ext = null;
    String[] allowExt = {"jpg", "png", "gif"};
    int dot = 0;

    File file1  = multi.getFile("upload");

    String name = file1.getName();
    dot = name.lastIndexOf(".");

    if(dot != -1) {

    	ext = name.substring(dot);

    } else {

    	ext = "";

    }


    //파일 확장자 제한
    if(ImageResize.isContainsFileExt(fileName, allowExt)){

        long fixNum = (long)(100+(Math.random()*(long)999999999));
        String newName = "sample" + (fixNum) + ext;
        String newName_small = "sample" + (fixNum) +"_small" + ext;

        // 파일 객체 얻기
        File newfile = new File(file1.getParent(), newName);
        file1.renameTo(newfile);


        //============= 이미지 리사이즈 시작 =============

        String imgOriginalPath= file1.getParent() + "/" + newName;           // 원본 이미지 파일명
        String imgTargetPath= file1.getParent() + "/" + newName_small;  	 // 새 이미지 파일명
        String imgFormat = "jpg";                            				 // 새 이미지 포맷. jpg, gif 등
        int newWidth = 680;                                                  // 변경 할 넓이
        int newHeight = 700;                                                 // 변경 할 높이
        String mainPosition = "W";                                           // W:넓이중심, H:높이중심, X:설정한 수치로(비율무시)

        boolean chkSave = ImageResize.resizeImage(imgOriginalPath, imgTargetPath, imgFormat, newWidth, newHeight, mainPosition);

        //============= 이미지 리사이즈 끝 =============


        returnValue = "/upload/downImg/"+newName_small;


        if(chkSave) {

            out.println("{");
            out.println("\"uploaded\": 1,");
            out.println("\"fileName\": \""+newName+"\",");
            out.println("\"url\":\""+returnValue+"\"");
            out.println("}");

        } else {

            // 첨부 오류 메세지

        }


    } else {

    	file1.delete();

    }

}

 

- sizeLimit을 5 * 1024 * 1024로 설정하여 파일 크기를 5MB로 제한했습니다.

- allowExt는 "jpg", "png", "git"로 설정하여 확장자명을 제한했습니다.

- 서버에 들어갈 이미지명은 newName과 newName_small로 설정했습니다. (중복 파일명 혹은 오류 파일명 대비)

- 이미지 리사이즈 부분은 주석으로 설명을 달아놨습니다.

 

 

6. CKEditor 적용 화면

 

- CKEditor

 

CKEditor

 

- 이미지 업로드 화면

 

이미지 업로드 화면

 

- 서버로 전송 후 이미지 정보

 

이미지 정보

 

- 이미지 정보를 보면, 위의 uploadIMG.jsp 코드에서 설정한 대로 이미지명과 크기가 지정된 것을 확인할 수 있습니다.

 

 

 

 

이상으로 CKEditor 사용법 및 이미지 업로드 방법까지 알아보았습니다.

 

---