아주 괜찮은 WYSIWYG 에디터

개인적인 프로젝트를 진행하다 보면은 WYSIWIG 에디터가 꼭 필요한 경우가 있다. 이번에 개인적으로 진행하는 프로젝트에서 블로그형 글쓰기를 해야 하기 때문에 에디터가 필요하여 검색을 하다가 꽤 괜찮은 에디터를 찾았기에 공유해 보려고 한다.

 

보통 TinyMCE, CKEditor가 유료 버전으로 많이 쓰고, Summernotes가 부트스트랩 기반 무료 에디터로 많이 사용하고 있을 것이다. TinyMCE가 예전에 오픈소스였을 때 파일 업로드 기능을 따로 플러그인으로 개발을 해야 하는데, 문서가 난잡해서 만드는데 꽤 고생을 했던 것으로 기억한다. 그리고, UI가 별로 마음에 들지 않는다. 그래서 TinyMCE는 일단 제외. CKEditor는 사용해보지 않고 옛날에 문서들만 대충 봤었는데 TinyMCE보다 더 난잡한 문서로 읽기조차 싫었던 것으로 기억한다. 그래서 CKEditor로 제외. 남은 것은 Summernotes였는데 실제 플랫폼에 넣어보니 너무 빈약한 기능으로 마음에 들지 않았다. 아주 간단한 글을 작성하는 거면 썸머노트도 괜찮겠지만 블로그형 글쓰기라면 너무나 빈약한 기능들과 이미지 업로드 시 서버 전송이 아닌, base64 기반의 이미지를 만들어서 컨텐트에 집어 넣는 것도 너무 마음에 들지 않았다. 데이터베이스 사이즈가 어마무시하게 커지게 되므로, 데이터 읽는데 최악의 퍼포먼스를 보여줄 수 있다. 물론 플러그인을 개발해서 대체해도 되겠지만 귀찮음 때문에 하기가 싫다!

 

그래서 열심히 검색해보니, 처음보는 WYSIWYG 에디트를 발견했는데 이름이 플로알아 에디터. 이름이 일단 여자 이름같아서 마음에 드네. ㅎㅎㅎ

https://froala.com/wysiwyg-editor/

 

우선 UI가 정말 깔끔 그 자체다. 그리고 문서도 아주 깔끔하게 정리가 되어 있어 읽기도 편하고 에디터 내에서 한국어도 지원이 된다. 게다가 파일/이미지 업로드 자바스크립트 플러그인을 따로 개발할 필요 없이 서버쪽만 추가하면 되는데, 친절하게도 대부분의 언어에 대해 예제를 친철하게 제공하고 있다. 물론 예제가 조금 잘못된 부분이 있기야 하지만, 그정도는 쉽게 고쳐서 사용할 수 있으니 이정도면 거의 100점을 줘도 아깝지가 않다. 실제 사이트에 적용해보니 기대 이상으로 잘 돌아간다. 

 

무료/유료 버전이 있는데, 무료 버전은 에디터 하단에 Powered by Froala 워터마크가 있으나 에디터 자체의 기능에는 전혀 영향을 주지 않으니 상관이 없을 듯 하다. 앞으로 WYSIWYG 에디터를 사용할 일이 있다면 무조건 플로알아 에디터를 사용하는 것이 개발 효율성이나 깔끔한 사이트를 만드는데 도움이 될 듯!