라이브러리 창고/에디터 · 문서제작

『ck Editor 5 』프레임워크와 결합한 ck에디터

Recstasy 2021. 3. 20. 06:53

ck에디터는 게시판 위주의 사이트를 개발할 때 유용하다.

 

게시판 에디터를 직접 개발하려면

정규표현식과 관련된 성가신 작업이 상당히 많다.

ck에디터는 게시판 유형의 사이트 개발에 획기적이었다.

 

 

코드 10줄이면 꽤 괜찮은 에디터를 제공할 수 있다.

 

 

Basic API - CKEditor 5 Documentation

Learn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, customize it, create your own plugins and custom editors, change the UI or even bring your own UI to the editor. API reference and examples included.

ckeditor.com

 

ck에디터 5버전은 vue, angular, react JS 3대 프레임워크와 결합할 수 있고,

부트스트랩, 자체테마 제작과 같은 기능을 사용할 수 있다.

전반적으로 자유도가 높아졌다.

 

ckEditor & 부트스트랩 결합

 

특히, Balloon Editor는 소셜미디어 에디터에 사용할 수 있을 정도의 퀄러티를 보여준다.

 

Bakkib editor

 

Document editor역시 꽤 괜찮은 수준의 문서를 작성할 수 있는 수준이며,

상단 툴바에 적용할 수 있는 플러그인 숫자도 증가했다. 

 

Document editor

 

실제 블로그에 간단하게 적용해보자.

 

 

CDN

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

*[distribution]위치에 종류에 맞는 ck에디터 이름을 넣어준다

 

해당 위치에 문서작성 시작.

 

과거 사용했던 ck에디터(4.0?)보다 훨씬 깔끔해졌다.

향후 게시판형 사이트를 제작할 기회가 된다면, ck에디터를 사용할 것 같다.