1. CKEDITOR ClassicEditor 다운로드
저는 CKEDITOR중 ClassicEditor 기준으로 연동방법에 대해서 설명드리겠습니다. 아래 사이트로 이동하여 CK EDITOR를 설치합니다.
https://ckeditor.com/ckeditor-5/download/
CKEditor 5 - Download
Download a ready-to-use CKEditor 5 Build.
ckeditor.com
저는 다음과 같은 경로에 설치한 ckeditor 파일들을 넣어주었습니다.
2. JSP 파일 작성
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.ck-editor__editable {
min-height: 400px;
}
</style>
<meta charset="utf-8">
<title>CKEditor 5 – Document editor</title>
<script src="${pageContext.request.contextPath}/resources/ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>Document editor</h1>
<!-- The toolbar will be rendered in this container. -->
<div id="toolbar-container"></div>
<!-- This container will become the editable. -->
<div id="editor">
<p>This is the initial editor content.</p>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ), {
ckfinder: {
uploadUrl: '/ck/fileupload' // 내가 지정한 업로드 url (post로 요청감)
},
alignment: {
options: [ 'left', 'center', 'right' ]
}
} )
.then( editor => {
const toolbarContainer = document.querySelector( '#toolbar-container' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>3. 결과 페이지
서버를 실행 시켜서 페이지를 들어가보면 다음과 같이 에디터를 확인할 수 있습니다.
'Spring Framework' 카테고리의 다른 글
| [Spring Framework] Mybatis 쿼리 파라미터 null 처리 (0) | 2019.12.17 |
|---|---|
| [Spring Framework] mybatis-config.xml 설정 파일 (0) | 2019.12.04 |
| [Spring Framework] logback 설정 (0) | 2019.12.01 |
| [Spring Framework] @JsonFormat을 이용한 날짜 형식 지정 (0) | 2019.11.28 |
| Apache POI 예제 (0) | 2019.11.20 |
