spring 19강 Smart Editor(CKEditor, SummerNote)

spring 19강 Smart Editor(CKEditor, SummerNote)

WYSIWYG(위지윅 에디터, what you see is what you get)

- 사용자가 현재 화면에서 보고 있는 내용과 동일한 html code를 생성하는 에디터

- 네이버, 다음 에디터, CKEditor, SummerNote 등

CKEditor

- https://ckeditor.com/ckeditor-4/download/ (standard 버전 다운로드)

- 최신버전보다는 안정화된 버전인 4.11.2 버전으로 실습

- 이미지 업로드를 위해서는 별도의 작업 필요

다운로드 받은 ckeditor 파일의 압축을 풀고 ckeditor 디렉토리를 views에 붙임

view에 등록된 요소들은 모두 servlet으로 인식되므로 servlet-context에서 리소스 등록을 해야만 링크가된다.

servlet-context.xml

    <resources location="/WEB-INF/views/ckeditor/" 
    mapping="/ckeditor/**"></resources>

ckeditor를 적용시킬 페이지에 스크립트를 한줄 입력해야한다.

<script src=${path}/ckeditor/ckeditor.js"></script>

view에 위치한 ckeditor 리소스 폴더 안에 있는 ckeditor.js파일을 사용하기 위한 스크립트 (jquery 사용할때처럼)

product_write.jsp 일부

<script src="${path}/ckeditor/ckeditor.js"></script>

 

        <td>상품설명</td>
        <td><textarea rows="5" cols="60" 
            name="description" id="description"></textarea>
<script>
//id가 description인 태그에 ckeditor를 적용시킴
CKEDITOR.replace("description"); //이미지 업로드 안됨
</script>        

태그 아이디만 입력해주면 해당 태그 영역이 스마트에디터에서 설정한 스타일로 바뀐다.

이미지파일을 서버에 업로드하여 글 작성하도록 코드 작성  

        <td>상품설명</td>
        <td><textarea rows="5" cols="60" 
            name="description" id="description"></textarea>
<script>
//id가 description인 태그에 ckeditor를 적용시킴
//CKEDITOR.replace("description"); //이미지 업로드 안됨
CKEDITOR.replace("description",{
    filebrowserUploadUrl : "${path}/imageUpload.do"
});
</script>        

이미지 업로드 코드 구현

upload. ImageUploadController.java

package com.example.spring02.controller.upload;
 
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
 
@Controller
public class ImageUploadController {
 
    private static final Logger logger=
            LoggerFactory.getLogger(ImageUploadController.class);
 
    @RequestMapping("imageUpload.do")
    public void imageUpload(HttpServletRequest request,
            HttpServletResponse response,
            MultipartFile upload) throws Exception {
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=utf-8");
 
        //업로드한 파일 이름
        String fileName=upload.getOriginalFilename();
 
        //파일을 바이트 배열로 변환
        byte[] bytes=upload.getBytes();
 
        //이미지를 업로드할 디렉토리(배포 디렉토리로 설정)
        String uploadPath=
"D:\\work\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp1\\wtpwebapps\\spring02\\WEB-INF\\views\\images\\";
        OutputStream out=new FileOutputStream(
                new File(uploadPath+fileName));
 
        //서버로 업로드
        out.write(bytes);
        //클라이언트에 결과 표시
        String callback=request.getParameter("CKEditorFuncNum");
 
        //서버=>클라이언트로 텍스트 전송(자바스크립트 실행)
        PrintWriter printWriter=response.getWriter();
 
        String fileUrl=
                    request.getContextPath()+"/images/"+fileName;
 
        printWriter.println(
"<script>window.parent.CKEDITOR.tools.callFunction("
+callback+",'"+fileUrl+"','이미지가 업로드되었습니다.')"
+"</script>");
        printWriter.flush();
    }
 
}
 
 
 
 
 
 
 
 
 
 
 

이미지 업로드 에러 발생시 ckeditor/config.js 마지막에 코드 한줄 추가

config.filebrowserUploadMethod='form';

SummerNote

- http://summernote.org

- 이미지를 텍스트 형식으로 저장함

다운로드 받아 압축풀고 dist 디렉토리를 views에 붙인다. (summernote로 rename)

홈페이지의 getting tarted 페이지에 include js/css 참고

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>

▼

product_write.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- views/shop/product_write.jsp -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../include/header.jsp" %>
 
<!-- include libraries(jQuery, bootstrap) --><link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>  <!-- include summernote css/js --><link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet"><script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
 
//주석처리 <!-- ckeditor 사용을 위해 js 파일 연결 -->//<script src="${path}/ckeditor/ckeditor.js"></script>
 
</head>
<body>
<%@ include file="../include/admin_menu.jsp" %>
<script>
$(function(){    //id가 description인 태그에 summernote 적용    $("#description").summernote({        height : 300,        width : 800    });});
 
function product_write(){
    // 태그를 name으로 조회할 경우
    //var product_name=document.form1.product_name.value;
    // 태그를 id로 조회할 경우
    var product_name=$("#product_name").val();
    var price=$("#price").val();
    var description=$("#description").val();
    if(product_name==""){ //빈값이면
        alert("상품이름을 입력하세요"); 
        $("#product_name").focus(); //입력포커스 이동
        return; //함수 종료, 폼 데이터를 제출하지 않음
    }
    if(price==""){
        alert("가격을 입력하세요");
        $("#price").focus();
        return;
    }
/*     if(description==""){
        alert("상품 설명을 입력하세요");
        $("#description").focus();
        return;
    } */
    //폼 데이터를 받을 주소
    document.form1.action="${path}/shop/product/insert.do";
    //폼 데이터를 서버에 전송
    document.form1.submit();
}
</script>
 
 
<h2>상품 등록</h2>
<form name="form1" method="post"
    enctype="multipart/form-data">
<table>
    <tr>
        <td>상품명</td>
        <td><input name="product_name" id="product_name"></td>
    </tr>
    <tr>
        <td>가격</td>
        <td><input name="price" id="price"></td>
    </tr>
    <tr>
        <td>상품설명</td>
        <td><textarea rows="5" cols="60" 
            name="description" id="description"></textarea>
<script>
 
//summernote 쓰기위해 ckeditor 코드는 모두 주석처리 //id가 description인 태그에 ckeditor를 적용시킴//CKEDITOR.replace("description"); //이미지 업로드 안됨/* CKEDITOR.replace("description",{    filebrowserUploadUrl : "${path}/imageUpload.do"}); */
</script>            
        </td>
    </tr>
    <tr>
        <td>상품이미지</td>
        <td>
            <input type="file" name="file1" id="file1"> 
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input type="button" value="등록" 
                onclick="javascript:product_write()">
            <input type="button" value="목록"
onclick="location.href='${path}/shop/product/list.do'">
        </td>
    </tr>
</table>    
</form>
 
</body>
</html>

CKEditor : 이미지 파일은 디렉토리에 저장, 테이블에는 링크만 저장, 이미지 업로드 자바 코드를 따로 구현해줘야함.

Summernote : 이미지 업로드 코드를 구현해줄 필요가 없지만 

   이미지를 텍스트형식으로 테이블에 저장(DB가 무거워짐) //product 테이블