[CKEditor 웹에디터 사용하기]
1. HTML + CSS + JavaScript로 만들어진 웹에디터
: 글 내용을 다양한 인터페이스와 함게 손쉽게 편집 가능
2. CKEditor
: WYSIWIG 웹 에디터 중 하나,
세계적으로 가장 널리 쓰임
3. CKEditor Quick Start Guide(기본설치 가이드)
: ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html
4. 기존의 JSP15_JDBC 게시판 + CKEditor + 이미지파일 업로드(cos 라이브러리 사용)
1) 기존의 JSP15_JDBC 게시판 복사
2) CKEditor 다운로드
: https://ckeditor.com/ckeditor-4/download/ > Download 클릭
> 다운로드 받은 CKEditor 압축 파일, 압축 풀기
> 압축 풀은 ckeditor 폴더 프로젝트 폴더로
3) 이미지파일 업로드(cos 라이브러리 사용)
** 에디터에서 첨부할 이미지 업로드 폴더 만들기 : ckupload 폴더 생성 완..!!
** cos 라이브러리 추가, db도 사용하기 때문에 ojdbc6_g 라이브러리도 추가..!!
5. 실제로 에디터가 등장할 곳은 write.jsp, update.jsp
6. CKEditor 설정 3가지 설정 방법
: ckeditor.com/docs/ckeditor4/latest/guide/dev_configuration.html
1) 패키지에 배포된 config파일 에 설정
2) CKEditor가 사용되는 페이지 내에 설정
3) 사용자정의파일로 설정
7. JSPEX_WebEditor
1) write.jsp 수정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글작성</title>
<script src="ckeditor/ckeditor.js"></script>
</head>
<script>
function chkSubmit(){ // 폼 검증
frm = document.forms["frm"];
var name = frm["name"].value.trim();
var subject = frm["subject"].value.trim();
if(name == ""){
alert("작성자 란은 반드시 입력해야 합니다");
frm["name"].focus();
return false;
}
if(subject == ""){
alert("제목은 반드시 작성해야 합니다");
frm["subject"].focus();
return false;
}
return true;
}
</script>
<body>
<h2>글작성</h2>
<%-- 글 내용이 많을수 있기 때문에 POST 방식 사용 --%>
<form name="frm" action="writeOk.do" method="post" onsubmit="return chkSubmit()">
작성자:
<input type="text" name="name"/><br>
제목:
<input type="text" name="subject"/><br>
내용:<br>
<textarea name="content" id="editor1"></textarea>
<script>
CKEDITOR.replace('editor1', {
allowedContent: true, // HTML 태그 자동삭제 방지 설정
width: '640px', // 최초 너비, 높이 지정 가능
height: '400px',
filebrowserUploadUrl: '${pageContext.request.contextPath}/fileUpload.do'
});
</script>
<br><br>
<input type="submit" value="등록"/>
</form>
<br>
<button type="button" onclick="location.href='list.do'">목록으로</button>
</body>
</html>
2) update.jsp 수정
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:choose>
<c:when test="${empty list || fn:length(list) == 0 }">
<script>
alert("해당 정보가 삭제되거나 없습니다");
history.back();
</script>
</c:when>
<c:otherwise>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>수정 ${list[0].subject }</title>
<script src="ckeditor/ckeditor.js"></script>
</head>
<script>
function chkSubmit(){
frm = document.forms['frm'];
var subject = frm['subject'].value.trim();
if(subject == ""){
alert("제목은 반드시 작성해야 합니다");
frm['subject'].focus();
return false;
}
return true;
}
</script>
<body>
<h2>수정</h2>
<form name="frm" action="updateOk.do" method="post" onsubmit="return chkSubmit()">
<input type="hidden" name="uid" value="${list[0].uid }"/>
작성자 : ${list[0].name }<br> <%-- 작성자 이름 변경 불가 --%>
제목 :
<input type="text" name="subject" value="${list[0].subject }"/><br>
내용: <br>
<textarea name="content" id="editor1">${list[0].content }</textarea>
<script>
CKEDITOR.replace('editor1', {
allowedContent : true,
filebrowserUploadUrl: '${pageContext.request.contextPath}/fileUpload.do'
});
</script>
<br>
<input type="submit" value="수정"/>
</form>
<button onclick="history.back()">이전으로</button>
<button onclick="location.href='list.do'">목록보기</button>
</body>
</html>
</c:otherwise>
</c:choose>
8. 파일 (이미지 파일) 업로드 기능 추가하기
: 이미지 파일이 서버에 업로딩 필요(즉, 백엔드쪽에서 업로딩된 파일의 저장 등의 처리가 필요)
** 업로드된 이미지 파일이 게시글에 보여주기 위해서는 백엔드 측에서 저장된 파일의 URL을
프론트 엔드 쪽에 알려주어야 가능
** 웹에디터 기본 세팅은 프론트엔드만 처리하면 되나, 파일 업로딩은 백엔드와 같이 작동 해야 함
9. fileUpload.jsp 작성
** fileUpload.jsp
package com.command.write;
import java.io.IOException;
import java.util.Enumeration;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;
import com.oreilly.servlet.multipart.FileRenamePolicy;
public class FileUploadCommand implements Command {
@Override
public void execute(HttpServletRequest request, HttpServletResponse response) {
// 1.
// 업로드 된 파일 저장
final String SAVE_URL = "ckupload";
// 실제 저장되는 물리적인 경로 확인
ServletContext context = request.getServletContext();
String saveDirectory = context.getRealPath(SAVE_URL);
System.out.println("업로드 경로: " + saveDirectory);
Enumeration names = null;
String name = null; // parameter로 넘어오는 name 값
String originalFileName = null; // 원본 파일 이름
String fileSystemName = null; // 실제 저장되는 파일 이름
String fileType = null; // 파일 MIME 타입
String fileUrl = null; // 업로드된 파일의 URL
int maxPostSize = 5 * 1024 * 1024; // POST 받기, 최대 5M byte
String encoding = "utf-8"; // 인코딩
FileRenamePolicy policy = new DefaultFileRenamePolicy(); // 업로딩 파일 이름 중복에 대한 정책
MultipartRequest multi = null;
try {
multi = new MultipartRequest(
request,
saveDirectory,
maxPostSize,
encoding,
policy
);
} catch (IOException e) {
e.printStackTrace();
}
// 1-2
names = multi.getFileNames(); // type="file" 요소의 name들 추출
while(names.hasMoreElements()) {
name = (String)names.nextElement();
System.out.println("input name : " + name); // CKEditor에서 name이 "upload"이다.
originalFileName = multi.getOriginalFileName(name);
fileSystemName = multi.getFilesystemName(name);
fileType = multi.getContentType(name);
fileUrl = request.getContextPath() + "/" + SAVE_URL + "/" + fileSystemName;
System.out.println("fileUrl : " + fileUrl);
}
// 2.
// response(CKEditor에서 정한 포맷, json)
//{
// "uploaded": 1,
// "fileName": "foo.jpg",
// "url": "/files/foo.jpg"
//}
String jsonString = "{\"filename\" : \"" + fileSystemName
+ "\", \"uploaded\" : 1, \"url\":\"" + fileUrl + "\"}";
try {
response.setContentType("application/json; charset=utf-8");
response.getWriter().write(jsonString);
} catch(IOException e) {
e.printStackTrace();
}
} // end execute()
} // end Command'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글
| 2020.06.03 (0) | 2020.06.03 |
|---|---|
| 2020.06.02 (0) | 2020.06.02 |
| 2020.05.28 (0) | 2020.05.28 |
| 2020.05.27 (0) | 2020.05.27 |
| 2020.05.26 (0) | 2020.05.26 |