[개발] CKEditor 사용하기

 

CKEditor는 HTML 및 텍스트 편집을 위한 오픈 소스 웹 기반 텍스트 에디터이다. 
CKEditor는 컨텐츠를 손쉽게 편집하고 관리할 수 있도록 해주는 강력하고 유연한 도구 중에 하나이다. 

네이버에디터는 국내에서 많이 사용 중이지만 CKEditor는 글로벌로 많이 사용하는 에디터이다. 

CKEditor 사용법

<script src="https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/ckeditor.js"></script>

에디터 생성 

<textarea id="editor"></textarea>

 

스크립트를 통해서 CKEditor 초기화

ClassicEditor.create(document.querySelector(selector), {
				ckfinder: {
					uploadUrl: '/upload/images'
				}
			}).then(newEditor => {
				newEditor.setData(initialData);
				return newEditor;
			}).catch(error => {
				console.error(error);
			}

에디터내에 이미지 업로드 기능은 ckfinder를 이용하면 기능구현이 가능하다. 
/upload/images 는 이미지 업로드가 가능하도록 API를 하나 생성해 주면 된다. 

다른 업로드 기능이 있지만 손쉽게 사용이 가능했다. 유료 기능이라고 표기되어 있었던 거 같은데 테스트에는 문제가 없었다.