Q. Vue 에서 가장 검증된 WYSIWYG 에디터 추천부탁드립니다.

기본 아바타 humanfly 2019. 01. 07. 조회수 4043


Vue 로 B2C 서비스를 개발하고 있는 개발자입니다.

블로그와 같이 사용자들에게 편집 가능한 아티클을 입력받는 기능이 있다보니

에디터가 고민인데요.

기존에는 사용하던 에디터가 한글(멀티바이트) 입력시 버그가 좀 있어서

검증된 오픈소스 에디터 라이브러리를 찾고 있습니다.

또 현업에서 Vue.js 로 개발하고 계신 분들이 어떤 에디터를 선호하시는지 궁금하네요!

참고로 제가 필요한 기능은 다음과 같습니다.

  • 기본적인 Bold, Italic, Underline, Ol, Ul 기능

  • 링크 입력 기능

  • 이미지

공유하고 보상받기 ♥︎
댓글 0

1개의 답변이 있습니다.

큐레이터 채택
기본 아바타 뷰르주아 답변자인증
시더스 개발팀 2019. 01. 07 100%의 채택

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 추천드려요. 쓰다보니 사용기처럼 길게 나열했네요. 선택에 도움되시면 좋겠습니다.

댓글 0