Vue 에서 가장 검증된 WYSIWYG 에디터 추천부탁드립니다.
Vue 로 B2C 서비스를 개발하고 있는 개발자입니다.
블로그와 같이 사용자들에게 편집 가능한 아티클을 입력받는 기능이 있다보니
에디터가 고민인데요.
기존에는 사용하던 에디터가 한글(멀티바이트) 입력시 버그가 좀 있어서
검증된 오픈소스 에디터 라이브러리를 찾고 있습니다.
또 현업에서 Vue.js 로 개발하고 계신 분들이 어떤 에디터를 선호하시는지 궁금하네요!
참고로 제가 필요한 기능은 다음과 같습니다.
기본적인 Bold, Italic, Underline, Ol, Ul 기능
링크 입력 기능
이미지
humanfly님 저희 회사도 프론트엔드 프레임워크로 Vuejs를 사용하고 있는데,
마침 제가 에디터를 붙여본 경험이 있어서 답변 드립니다.
https://github.com/vuejs/awesome-vue 여기 보시면 수많은 에디터가 있는데, 이중에서 저는 아래 2가지를 써보았습니다.
vue-quill-editor
어썸뷰에 추천되어 있는 에디터 중에서 깃헙에서 별을 제일 많이 에디터인데, 원래 Quill (https://quilljs.com/) 이라는 에디터를 vue에서 쓸 수 있도록 포팅해놓은 것 같습니다. 필요하시다고 쓰신 기능들은 기본적으로 전부 잘 지원하는데, 커스터마이징이 불편합니다. 툴바같은 거나 디자인은 수정하기 쉬운데, 에디터 안의 사용자가 입력한 내용을 추적하기 위해서 사용하는 delta에 대해 깊이 들어가기 시작하면 헬입니다. 코드블록에서 영문은 잘되는데 한글쓰면 별의별 이슈가 다 튀어나와서 코드를 까보았는데 수정이 정말 쉽지 않습니다.
에디터에 입력된 내용을 html로 까보면 tag마다 클래스가 붙습니다. OL을 쓰시면 ol태그에 .quill-ordered-list 이런 식으로 클래스가 붙고, 따라서 Quill에 필요한 CSS를 임포트해주셔야 됩니다.
tiptap
나온지 얼마안된 것 같은데 사용자가 빠르게 불어나고 있는 것 같습니다. 독일 개발자가 Vue용 에디터를 찾다가 jQuery같은 오래된 라이브러리에 디펜던시가 없는 에디터를 찾다가 만족스러운게 없어서 만든 에디터라고 공식 문서에 써있습니다. Prosemirror 를 기초로 해서 제작된 에디터인데, Prosemirror 는 Atlassian이나 New York Times에서 쓰는 에디터라고 하네요. Prosemirror 자체가 모듈화가 매우 잘 되어 있어서 수정이 쉽습니다. 필요없는 모듈은 빼셔도 되고, 기존 모듈 대신 다른 모듈을 갖다써도 됩니다. 아 그리고 마크다운도 지원합니다.
한글 입력에서 이상한 문제도 특별히 없고 말씀하신 기능도 전부 지원하는데, 디자인은 메뉴 조차도 디자인되어 있지 않습니다. renderless component 라고 마크업과 스타일링을 강제하지 않는 방식인데 저는 이 방식이 훨씬 좋아서 결국 이 에디터로 정착했습니다. 다만 Prosemirror 가 처음에 개념 잡는 데까지 시간이 조금 걸리는데, tiptap에서 제공하는 커스터마이징 정도로 만족 못하시고 나열하신 기능 외에 더 많은 것이 필요하실 때에만 보시면 됩니다.
저는 tiptap 추천드려요. 쓰다보니 사용기처럼 길게 나열했네요. 선택에 도움되시면 좋겠습니다.