예전에 네이버 스마트 에디터 2.0을 활용해 만든 사이트가 있었다.
그런데 업무상 한글파일을 복사해서 붙여넣는 필요가 있는데, 안된단다..
그래서 새로운 에디터를 찾다보니 CKEditor5를 알게됐다.
일단 테스트로 한번 만들어보고, 스프링 프로젝트에 적용하는 것 까지 해볼 예정이다.
자. 일단 요구사항은 아래와 같다.
1. 한글파일을 붙여넣었을때 무리 없이 동작해야 함.
2. 이미지 업로드가 가능해야함.
3. 유튜브, 페이스북 등 동영상을 재생할수 있어야함.
자, 해보자. 공식사이트 Quick start 코드를 그대로~ 붙여넣으면 끝난다. 나는 index.html로 만들었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CKEditor 5 – Classic editor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>이 파일을 실행하면, 아래와 같은 화면이 딴 나타난다.
엄청난데? 몇줄 넣지도 않았는데 엄청난 화면이 등장했다.
음.. 근데 몇개 더 넣고 싶다면? 예를들면 문단 정렬 기능이라든지? 글씨 크기라든지?
사실 CKEditor 적용하면서 이부분이 너무 힘들었다. node쪽 지식이 없어서 npm을 쓰면 어디에 소스가 위치 하는지. 찾아가기도 어렵고.. 또 공부할게 생겼다.
무튼! 해결방법은 CKEditor에서 무려 온라인 빌더를 제공해 주신다!
온라인 빌더에 들어가보면
이렇게 총 다선단계로 내가 원하는 형태의 라이브러리를 구성할 수 있다.
1단계 에디터 타입 선택!
총 다섯가지 형태의 에디터타입중에서 하나를 선택하면 된다. 나는 클래식하게 클래식에디터를 선택했다.
2. 플러그인 선택
여기서 내가 사용할 플러그인을 선택한다. 플러그인 같은 경우에는 유료인 것도 있다는데, 사실 뭐가 유룐지 모르겠어서 일단 CKSource? 쪽에 문의사항을 보내둔 상태다. 혹시 알게되면 공유하겠음! 일단 다음단계!
3. 선택한 라이브러리를 활용한 툴바 구성?
위 아래로 두개의 툴바가 보이는데, 위에 있는 툴바는 사용할 수 있는 툴바 모음이고, 아래는 적용될 툴바 모음이다.
위에서 활성화된 버튼을 클릭하면 아래 툴바에 추가된다.
4. 언어 선택!
사용할 언어를 선택할수 있다! 한글사랑!
5. 빌드 및 다운로드
스타트 버튼을 누르면 빌드가 시작되고, 완료되면 다운로드 버튼으로 변경된다.
이렇게 소스를 다운받을수 있다.
압축을 해제하고 ckeditor5 > sample > index.html 파일을 확인한다. 내가 적용한 툴바가 정확히 적용되었는지 확인한다.
툴바가 잘 적용된것을 확인했다면 이제 스프링 프로젝트에 넣어보자.
'Spring Framework' 카테고리의 다른 글
| [CKEditor] 스프링 프로젝트에 CKEditor5 설치하기 (0) | 2020.10.15 |
|---|
