TinyMCE
- 위지윅 에디터
- npm 에서 설치하여 사용 가능
- 무료/유료 플랜으로 나뉘어 있음
- 무료 플랜에선 기본적으로 포함된 플러그인만 사용 가능
- 유료 플랜은 여러개로 나뉘어 있고 플러그인의 차이, 월간 에디터 로드 가능 횟수(?)의 차이가 있음
장점
- 위지윅 에디터라 편집한 내용이 그대로 화면에 보여짐
- 라이브러리 형태로 제공되기 때문에 개발자가 원하는 곳에서 사용 가능
- react, vue, angluar 같은 프레임워크와 호환 가능
- 다른 위지윅 에디터들보다 기본 기능도 괜찮은 편이고, 디자인도 무난함
- 무료 플랜이 존재
- 기본 플러그인으로 사용이 제한되지만, 필요한 기능은 갖추고 있음
- 무료 플랜에서 사용 가능한 플러그인들
- 커스텀 플러그인의 작성이 가능함
- 무료 플랜에서 사용 불가능한 플러그인이나 구현되지 않은 기능들에 대해, 필요에 따라 직접 개발하여 사용 가능해 보임
단점
- 사용 방식에 따라 준비 과정이 필요함
- api 키를 발급받아 사용
- tiny에 가입하고 무료 api키를 발급 받아야 함
- 사용량 제한 있는걸로 보임
- self hosting 서버 사용
- node_modules/tinymce 소스코드를 직접 웹 서버가 호스팅 해줘야 함
- postinstall 스크립트로 해결 가능
- 제어권이 개발자에게 있어서 사용량 제한은 없을 것으로 보임
- api 키를 발급받아 사용
- 무료 플랜의 기능 제한
- 베이스 플러그인에도 필요한 핵심 기능은 대부분 구현되어 있음
- 프리미엄 플랜에서만 가능한 플러그인들
비교
vs Obsidian
| TinyMCE | Obsidian |
|---|---|
| 위지윅 에디터 (html) | 마크다운 에디터 (옵시디언 문법의 md) |
| 라이브러리 형태로 제공 | 설치 프로그램 형태로 제공 |
| 무료(기능제한)/유료 플랜 존재 | 무료/유료(라이센스,추가기능) 플랜 존재 |
| html 문법을 몰라도 UI 조작으로 스타일링 가능 | md 문법을 알아야 스타일링, 콘텐츠 작성이 가능 |
| 작성하면서 미리보기 가능 | 작성시에는 markdown 문법이 보임 |
| 플러그인 지원 | 플러그인 지원 |
| 웹 호스팅 불가능, 직접 구현해야 함 | 유료 플랜 이용시 웹 호스팅 가능 or 직접 구현시에도 가능 |
vs Gitlab
| TinyMCE | Gitlab |
|---|---|
| 위지윅 에디터 (html) | 마크다운 파일 에디터 (md) |
| 라이브러리 형태로 제공 | Gitlab 서비스 내에서 제공 |
| 작성하면서 실시간으로 미리보기 가능 | 작성하면서 실시간으로 미리보기 불가능, 다른 탭으로 이동하여 확인 가능 |
| html 문법을 몰라도 UI 조작으로 스타일링 가능 | md 문법을 알면 더 많은 스타일의 콘텐츠를 작성 가능 (툴바로 어느정도 작성 가능) |
| 플러그인 지원 | 플러그인 미지원 |
| 웹 호스팅 불가능, 직접 구현해야 함 | Gitlab pages를 통해 호스팅 가능 |
정리
- TinyMCE는 위지윅 에디터여서 obsidian, gitlab과는 다르게 html 포맷으로 콘텐츠를 관리함
- 마크다운 문법이 필요하다면 html to markdown을 해 주는 라이브러리를 사용 할 수 있지만, 콘텐츠의 스타일이 변형될 가능성이 있음
- 유료 플랜이 존재하고, 무료 플랜은 플러그인의 사용에 제약이 있음 (커스텀 플러그인은 제외)
- TinyMCE의 설치 과정이 일반 위지윅 에디터에 비해 불편한 점은 분명히 존재함
- TinyMCE는 커스텀 플러그인을 지원하여 필요한 기능을 직접 구현할 수 있음
- 커스텀 스타일 주입도 가능할 것으로 보이는데 확인 필요함.
- 비교한 obsidian, gitlab은 마크다운 문법을 알아야 잘 활용할 수 있음
123