[API] JSP를 이용한 네이버스마트에디터API 게시판 적용

스마트에디터 v.2.8.2.3 다운로드

https://github.com/naver/smarteditor2/releases/tag/v2.8.2.3

Release v2.8.2.3: archive v2.8.2.4259f59 · naver/smarteditor2

 

프로젝트에 다운로드 파일 추가

 

view jsp파일에 에디터코드 추가

@admin_recEnrollForm.jsp

 

 

 

라이브러리 파일 추가

 

디렉토리내 파일 코드 수정

@photo_uploader.html

action="FileUploader.php" 삭제

@attach_photo.js

sUrl, sCallback 각 파일의 경로에 맞게 수정

sUploadURL 경로에 맞게 수정

 

사진 입력을 위한 file_uploader, file_uploader_html5 JSP 파일 만들기

다운로드한 스마트에디터 파일 내에 php 파일로 존재하지만 JSP로 처리할 것이기 때문에

개발천재님의 블로그에서 코드를 가져온후 경로수정한 JSP파일을 만들어줬다

@file_uploader_html5.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@page import="java.io.*"%>
<%@page import="java.util.UUID"%>
<%@page import="java.text.SimpleDateFormat"%>
 
<%
    //파일정보
    String sFileInfo = "";
    //파일명을 받는다 - 일반 원본파일명
    String filename = request.getHeader("file-name");
    //파일 확장자
    String filename_ext = filename.substring(filename.lastIndexOf(".") + 1);
    //확장자를소문자로 변경
    filename_ext = filename_ext.toLowerCase();
 
    //이미지 검증 배열변수
    String[] allow_file = { "jpg", "png", "bmp", "gif" };
 
    //돌리면서 확장자가 이미지인지 
    int cnt = 0;
    for (int i = 0; i < allow_file.length; i++) {
        if (filename_ext.equals(allow_file[i])) {
            cnt++;
        }
    }
 
    //이미지가 아님
    if (cnt == 0) {
        out.println("NOTALLOW_" + filename);
    } else {
        //이미지이므로 신규 파일로 디렉토리 설정 및 업로드   
        //파일 기본경로
        String dftFilePath = request.getSession().getServletContext().getRealPath("/");
        //파일 기본경로 _ 상세경로
        String filePath = dftFilePath + "resources" + File.separator + "board_upfiles" + File.separator;
        File file = new File(filePath);
        if (!file.exists()) {
            file.mkdirs();
        }
        String realFileNm = "";
        SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
        String today = formatter.format(new java.util.Date());
        realFileNm = today + UUID.randomUUID().toString() + filename.substring(filename.lastIndexOf("."));
        String rlFileNm = filePath + realFileNm;
        ///////////////// 서버에 파일쓰기 ///////////////// 
        InputStream is = request.getInputStream();
        OutputStream os = new FileOutputStream(rlFileNm);
        int numRead;
        byte b[] = new byte[Integer.parseInt(request.getHeader("file-size"))];
        while ((numRead = is.read(b, 0, b.length)) != -1) {
            os.write(b, 0, numRead);
        }
        if (is != null) {
            is.close();
        }
        os.flush();
        os.close();
        ///////////////// 서버에 파일쓰기 /////////////////
 
        // 정보 출력
        
        
        sFileInfo += "&bNewLine=true";    
        sFileInfo += "&sFileName=" + filename;    
        sFileInfo += "&sFileURL=/KGG/resources/board_upfiles/"+realFileNm;
        out.println(sFileInfo);
    }
%>

@file_uploader.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@page import="java.io.FileOutputStream"%>
<%@page import="java.io.OutputStream"%>
<%@page import="java.io.InputStream"%>
<%@page import="java.util.UUID"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
 
<%
String return1="";
String return2="";
String return3="";
String name = "";
 
if (ServletFileUpload.isMultipartContent(request)){
    ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory());
    uploadHandler.setHeaderEncoding("UTF-8");
    List<FileItem> items = uploadHandler.parseRequest(request);
    for (FileItem item : items) {
        if(item.getFieldName().equals("callback")) {
            return1 = item.getString("UTF-8");
        } else if(item.getFieldName().equals("callback_func")) {
            return2 = "?callback_func="+item.getString("UTF-8");
        } else if(item.getFieldName().equals("Filedata")) {
            if(item.getSize() > 0) {
      
                name = item.getName().substring(item.getName().lastIndexOf(File.separator)+1);
                String filename_ext = name.substring(name.lastIndexOf(".")+1);
                filename_ext = filename_ext.toLowerCase();
                String[] allow_file = {"jpg","png","bmp","gif"};
                int cnt = 0;
                for(int i=0; i<allow_file.length; i++) {
                    if(filename_ext.equals(allow_file[i])){
                        cnt++;
                    }
                }
                if(cnt == 0) {
                    return3 = "&errstr="+name;
                } else {
                     
                    //파일 기본경로
                    String dftFilePath = request.getSession().getServletContext().getRealPath("/");
                    //파일 기본경로 _ 상세경로
                    String filePath = dftFilePath + "resources" + File.separator +"board_upfiles" + File.separator;
                     
                    File file = null;
                    file = new File(filePath);
                    if(!file.exists()) {
                        file.mkdirs();
                    }
                     
                    String realFileNm = "";
                    SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
                    String today= formatter.format(new java.util.Date());
                    realFileNm = today+UUID.randomUUID().toString() + name.substring(name.lastIndexOf("."));
                     
                    String rlFileNm = filePath + realFileNm;
                    ///////////////// 서버에 파일쓰기 ///////////////// 
                    InputStream is = item.getInputStream();
                    OutputStream os=new FileOutputStream(rlFileNm);
                    int numRead;
                    byte b[] = new byte[(int)item.getSize()];
                    while((numRead = is.read(b,0,b.length)) != -1){
                        os.write(b,0,numRead);
                    }
                    if(is != null) {
                        is.close();
                    }
                    os.flush();
                    os.close();
                    ///////////////// 서버에 파일쓰기 /////////////////
                     
                    return3 += "&bNewLine=true";
                                // img 태그의 title 옵션에 들어갈 원본파일명
                    return3 += "&sFileName="+ name;
                    return3 += "&sFileURL=/KGG/resources/board_upfiles/"+realFileNm;
                }
            }else {
                  return3 += "&errstr=error";
            }
        }
    }
}
response.sendRedirect(return1+return2+return3);
 
%>

 

전송시 컨트롤러로 입력값 가져가서 INSERT 처리

@RecommendationAdminInsertController.java

@RecommendationService.java

@RecommendationDao.java

@recommendation-mapper.xml

 

 

---

참고한 블로그

개발천재님들👍🏼👍🏼👍🏼

https://blog.naver.com/javaking75/220249200436

[JSP] 스마트에디터(smarteditor)의 싱글/멀티 이미지업로드하기

https://beforb.tistory.com/m/53

[Project] Naver SmartEditor 2.0으로 게시판만들기 - 1. 에디터 적용