10P by xguru 2020-11-13 | favorite | 댓글 2개

- 노션의 몇몇 기능을 Next.js + React.js + Express.js 등으로 구현
에디터
- 블록단위 편집
- 슬래시 커맨드 ( / 입력해서 블럭 종류 변경 )
- HTML 태그 입력 지원
- 이미지 업로드 ( /image )
- 드래그 앤 드롭으로 블럭 순서 변경
서버
- Guest 편집 지원
- 사용자 관리 기능
- 잡 스케줄링 (안쓰는 계정 및 페이지 삭제)

웹 WYSIWYG 에디터는 정말 많이 나오는데.. 딱 맘에 드는거는 찾기가 힘들긴 하더군요.
예전에 관련 에디터 오픈소스 들을 다 정리해둔게 있어서 가져왔습니다.

SummerNote: https://summernote.org - Super Simple WYSIWYG Editor on Bootstrap. 홍영택님이 만들고, 많은 한국분들이 참여중인 오픈소스 에디터
Quill: https://quilljs.com - An API Driven Rich Text Editor
Slate: https://www.slatejs.org - A completely customizable framework for building rich text editors
Trumbowyg: https://alex-d.github.io/Trumbowyg - A lightweight WYSIWYG editor
ContentTools: http://getcontenttools.com - A beautiful & small content editor
Squire: https://github.com/neilj/Squire - HTML5 rich text editor
Editor.js: https://codex.so/editor - Next generation block styled edito. JSON 으로 결과물 저장
ProseMirror: https://prosemirror.net/ - A toolkit for building rich-text editors on the web, 공동 편집가능 에디터
Gutenberg : https://wordpress.org/gutenberg/ - 워드프레스의 편집기
webiny : https://www.webiny.com/ - CMS for Serverless Web Development
GrapesJS : https://grapesjs.com/ - Web Builder Framework
Craft.js : https://github.com/prevwong/craft.js - A React Framework for building extensible drag and drop page editors
Draft.js : https://draftjs.org/ - Rich Text Editor Framework for React
Outline Rich MarkDown : https://github.com/outline/rich-markdown-editor
Edtr.io : https://edtr.io/ - React로 작성된 오픈소스 WYSIWYG에디터 https://news.hada.io/topic?id=1625