WYSIWYG 에디터

개요

• 개발 기간과 인력을 고려하였을 때 처음부터 설계하고 개발하기는 어렵다고 판단하여, 사이트(도메인)의 에디터 편집기는 라이브러리를 사용하여 구현하기로 함
• WYSIWYG 을 마크 다운만 지원할지, 네이버 편집기 같은 일반적인 리치 텍스트만 지원할지 혹은 둘 다 지원해야 되는지에 따라 다르겠지만, 일단 2개 다 지원하는 것을 위주로 라이브러리를 알아보고자 함

라이브러리

1. lexical

• playground

• 장점

  • 무료(오픈소스)이다
  • meta(페이스북) 에서 만듦

    (lexical이전에 Draft.js 가 있었지만... 예전 경험을 비추어 보았을 때 페이스북에서 만든 것이 맞는지 의심될만큼 정말... 최악이었음, 기억에서 지우자)

  • (마크다운은 사용해보지 않았으나 지원하는 패키지 있음, playground에서도 마크다운으로 작성시 변환되어 보여짐) 리치텍스트 WYSIWYG에디터를 구현하기 위해 사용해보았을 때 경험이 괜찮았다(한글 입력시 editor state에 바로 반영되는 등...)
  • 프레임워크에 상관없이 구현할 수도 있지만(기본이 js로 구현되있기 때문인듯) 리액트는 이미 별도의 패키지로 만들어져 있어서 바로 리액트에 적용할 수도 있다
  • 커스텀에 대해 자유롭다. 리치텍스트 에디터 구현시 리액트 컴포넌트로 커스텀하여 사용이 되는지 해보았는데 잘 되었던 경험이 있다. (복잡한 구조의 커스텀컴포넌트를 만들어서 하면 힘들 것 같지만, 그렇게 까지 많이 복잡한 컴포넌트로 커스텀하게 될 것 같지는 않다)

• 단점

  • Major 버전 0 (현재 0.12.5) ... recoil도 버전때문에 안정성이 없다고 보고 사용하는 것을 한번 더 고민하는거 같은데 언제 Major 버전이 1로 바뀔지는 모르겠다
  • 커스텀에 대해 (너무) 자유롭기 때문에 러닝커브가 좀 있다.
  • @lexical/code 패키지가 있는데, 관련된 데모를 찾기가 힘듦, 코드 하이라이팅이 잘 되는지는 테스트 해보아야 될 것 같다.

2. toast ui editor

• playground

• 장점

  • 무료이다
  • NHN에서 만듦 (처음에는 사내 마크다운 에디터로 사용할 목적으로 개발하였으나, 이후 공개적으로 오픈된 라이브러리이므로 안정성에 대해 어느정도 검증되었다고 보면 될 것 같다)
  • lexical 에 비해 빠르게 개발이 가능할 것 같음(lexical에 비해 러닝커브가 적은 편이라고 느껴짐)

• 단점

  • lexical에 비해서는 커스텀의 자유도가 낮은 것 같음

---

빠르게 개발하는 것이 목적이라면 toast ui editor 가 좋을 것 같다(toast ui editor가 기능적으로 부족한 것도 아니니까)