다음글은, 렛플운영자님이 커뮤니티에 올린글을 퍼온글입니다.

원글은 위의 링크에서 확인 부탁드립니다.

개인적으로, 렛플 운영자님께서 말씀하신대로 WYSIWYG 에디터 관련 라이브러리를 찾아 보신분들은 아실수도 있지만,

생각보다 한국어 기준으로 사용하자면 버그가 많거나, 사용이 어려운 경우가 허다합니다.

아래 글의 내용을 정리해주셔서 감사합니다.

====================================================================================================================================

안녕하세요 렛플 운영자입니다.

서비스 개발할때 각종 입력값에 쓸 게시판 에디터를 많이 찾고 계실것 같아,

저도 여러가지 검색하면서 적용했던 것들을 소개해 드리며 장점/단점을 적어드리려고 합니다.

최종적으로는 헤메지 말고 TipTap 써보세요. 정말 편하면서 빠릅니다.

1. 입력받는 것은 무엇이 있을까?

사용자의 Input을 받을 수 있는 방법으로는 기본 제공해주는 HTML 기능은 크게 두가지가 있습니다.

1) input(text) - 한줄로 간단하게 입력을 받을 수 있는 공간

2) textarea - 여러줄로 입력을 받을 수 있는 공간

이것으로 좀 부족합니다. 블로그처럼 안에 사진을 넣는다거나, 폰트사이즈를 다르게 한다거나 등

우리의 필요를 만족시키지 못할 때 필요한 것이 바로 "게시판 에디터(board editor)" 입니다.

텍스트의 색깔을 입힌다거나, 이미지를 넣거나 체크박스를 넣기도 하고 URL 등 하이퍼링크를 넣는 것도 간단하게 할 수 있죠

또한 요즘에는 video, instagram, twitter 등 url도 넣을 수 있는 에디터 기능도 많습니다.

렛플에서는 프로젝트 생성이나, 스토리와 같은 컨텐츠를 작성할 때는 게시판 에디터를 사용해서 작성할 수 있습니다.

여기서 가장 중요한 것은 "게시판 에디터"를 골라야 하는가입니다.

오픈 소스로 상당히 많은 에디터가 있다보니, 다 테스트하기에 앞서 몇가지 필수조건 등을 정의하고 가면 판단하기 좀 더 좋을 수 있습니다.

1) (중요) 폰트와 관련한 기본 기능을 지원(h1태그, 글자크기, color나 strike, 밑줄, 이탈릭 등)

2) (중요) 이미지 첨부 시 외부 이미지 서버에 올릴 수 있는 기능을 지원

게시판에 이미지를 업로드하면 기본은 base64로 하면 db에 저장해야할 데이터 크기가 기하급수적으로 커집니다.

그래서 base64보다는 이미지서버에 올려놓고 이 주소를 호출하는 방식을 지원하는 텍스트 에디터가 필요합니다.가끔씩 이런 기능이 지원되지 않는 애들이 있습니다. 그런경우는 장기적으로 쓰기 어렵습니다.

3) (중요) 모바일 웹에서 크기 등이 자동으로 최적화되는지 여부

4) (앱까지 확장을 검토하는 경우) 모바일 앱에서도 잘 보일 수 있도록 인라인 css를 지원해주는 에디터

결론적으로 렛플은 써머노트 (2021년)--> 팁탭(2023년)으로 게시판에디터를 이관했습니다.

가장 최신의 트렌드를 반영하고 있는 팁탭으로 이관하고나서, 엄청난 편의성에 만족하고 있습니다.

* 팁탭(Tiptap)(완전 추천) (https://tiptap.dev/)

사실은 이 이야기를 하려고, 전체 내용을 작성하는 것이긴 합니다.

아래 보이시나요. 프로덕트 헌트에서 1위를 한 에디터입니다. 정말 최신성의 모든 것을 반영했습니다.

1) 제가 쓰면서 엄청 감탄을 했는데, 우선 왠만한 플랫폼을 모두 지원합니다. 스벨트까지 지원하니 거의 말 다했다고 볼 수 있죠.

2) 모든 스타일을 인라인으로 박을 수 있습니다. 범용성이고 커스텀이 쉽습니다.

Heading.configure({
  HTMLAttributes: {
  style: "font-size: 18px;font-weight:normal",
  },
}),
Italic.extend({
  renderHTML({ HTMLAttributes }) {
  return ["i", HTMLAttributes, 0];
  },
}),
Link.configure({
   openOnClick: true,
   HTMLAttributes: {
   style: "text-decoration: underline",
   },
}),

3) 버튼을 모두 커스텀 가능하게 밖으로 빠져나와있습니다. 메뉴 구성이나 스타일 , 간격 등 모든것이 수정가능합니다.

<Button
 type="plain"
 color="active"
 icon="https://letspl.me/assets/images/editor-white-bold.svg"
 onClick={() => editor.chain().focus().toggleBold().run()}
 color={editor.isActive("bold") ? "active" : ""}
/>

4) 코드 하이라이팅 기능과 마크다운(Typography)을 지원합니다.

저도 이전에 코드 하이라이팅 적용해보려고 여러가지 해봤는데, 스타일이 깨져서 적용하지 못했습니다.

팁탭은 코드 하이라이팅 기능을 가지고 있고, 쉽게 적용하면, 위와 같이 코드를 분리해서 표시해줍니다.

또한 마크다운 등과 각종 입력 편의기능을 지원하고 있습니다.

5) 내가 생각하는 게시판의 모든 기능을 가지고 있습니다. 모든 기능이 extension으로 분리되어있습니다.

내가 원하는 기능만, 원할때만 설치해서 사용할 수 있습니다.

또한 각각 기능이 독립적인 extension으로 구성되어있기 때문에, 유지보수가 깔끔하고, 업데이트도 각각 하면 됩니다.

특히 버블메뉴(호버시에만 나오는 기능), 플로팅메뉴(빈칸에만 나오는 기능) 이런것들이 정말 감탄이 나옵니다.

다만 이미지에 대한 편집기능이 아직 없습니다. 그것까지 나오면 정말 완벽할 것 같습니다. 이부분은 좀 기다려보면 나오지 않을까 싶습니다.

* 스마트에디터(3.0은 사용불가) (http://naver.github.io/smarteditor2/demo)

국내 IT대기업인 네이버에서 유지보수하고 있는 오픈소스 에디터 입니다.

우선 디자인 너무 구립니다. 2010년도에 썻을 것 같아 쓰기가 싫습니다.

기능은 괜찮을 것 같긴한데 심지어 이 스마트에디터는 업그레이드도 안하고 새로운 버전(3.0)은 오픈할 계획도 없다고하니, 기다리지 마세요.

저도 쓰고 싶어서 물어봤으나, 공식적인 답변은 오픈소스화 할 계획이 없다고 하네요

네이버 너무 하지 않나?!!!! 아래껄 오픈소스화하라!!!!

* TOAST UI Editor (모바일 최적화가 안됨) (https://ui.toast.com/tui-editor)

NHN에서 만든 UI Editor입니다. 전체적으로 깔끔하고 유지보수가 강력합니다.

이 에디터의 경우 깔끔해서 좋긴한데 세가지 큰 문제가 있습니다.

1) PC 맞춤형이라서, 모바일웹에서 보면 최적화가 떨어집니다.

혹시나 해서, 크기를 줄여보는데, 모바일에 맞게 줄어드는게 아니라, 그냥 크기가 줄어듭니다.

뭔가 작업을 해줘야 하는데 , 그런 가이드라인이 없습니다. 모바일웹에서 크기 줄여보다가 포기했습니다.

링크

링크

사용할만한 WYSIWYG 에디터 정리글