TOAST UI Editor : NHN엔터에서 만든 오픈소스 에디터 (React 예제 포함)

예제

React js 로 예제를 만들어 보았습니다. 

소스 코드는 제 깃헙의 https://github.com/yunyong/tui-editor-react-example 여기에서,

데모 페이지는 여기 에서 확인하실 수 있습니다.

---

NHN엔터에서 오픈소스로 공개한 에디터가 나왔네요. 이름은 TOAST UI Editor. 2018년 1월 15일 깃허브에 공개 되었습니다.

마크다운(Markdown)과 위지윅(WYSIWYG) 기능을 포함한 형태라고 합니다. 엄청나네요.. 특히 엑셀 복붙이랑 그래프 표현은 정말 대단한 것 같습니다. 게시판 만들때 어떤 에디터를 쓰지.. 하는 고민을 덜어줄 것 같습니다. API 문서와 데모 예제 또한 정리가 잘 되어 있습니다. 깃헙을 포함한 모든 페이지가 영어로 되어있는걸 보니 세계시장을 겨냥해서 내놓은것 같네요. 

아래는 홈페이지에 나와있는 설명입니다.

TOAST UI 에디터는 마크다운(Markdown)과 위지윅(WYSIWYG) 모드를 제공합니다.

어떤 사람들은 마크다운의 생산성을 좋아하지만, 다른 누군가는 그것을 쉽게 편집할 수 있는 방법을 찾고 있을수도 있습니다. TOAST UI 편집기는 이 두가지 모두를 만족시킬 수 있습니다. 마크다운 모드와 위지윅 모드를 제공하며, 작성하는 동안 언제든지 전환할 수 있습니다. 하나의 문서에서 편리하게 두 기능을 사용해보세요.

Features

• 마크다운 모드
• 실시간 미리보기 : 렌더링 된 HTML을 확인하면서 Markdown을 편집하십시오. 수정 사항이 즉시 적용됩니다.
• 스크롤 싱크 : 마크다운 코드와 미리보기 사이의 스크롤 동기화 기능. 별도로 스크롤하지 않아도됩니다.
• 자동 들여 쓰기 : 커서는 항상 원하는 위치에 있습니다.
• 구문 강조 : 즉시 에러 난 마크다운 구문을 확인할 수 있습니다.
• 🚀  위지윅 모드
• 복사하여 붙여 넣기 : 브라우저, 스크린 샷, Excel, PowerPoint 등에서 붙여 넣기
• Codeblock 편집기 : 전체 너비 코드 편집기로 170 개 이상의 언어 강조 표시
• 표 : 마크다운 표가 싫은가요? 마우스로 모든 것을 할 수 있습니다.

Extensions

CommonMark와 GFM은 훌륭하지만 우리는 종종 사양을 벗어나는 요구 사항에 직면합니다. TOAST UI 편집기에는 마크다운 구문을 준수하는 강력한 확장 기능이 있습니다. 또한 자체 확장을 개발할 수 있도록 API도 제공합니다.
확장 프로그램에 대해 알아 보려면 https://github.com/nhnent/tui.editor/wiki/Extensions을 확인하십시오.

Links

홈페이지 : https://nhnent.github.io/tui.editor/

API : https://nhnent.github.io/tui.editor/api/latest/

GitHub : https://github.com/nhnent/tui.editor

npm : https://www.npmjs.com/package/tui-editor

예제

React js 로 예제를 만들어 보았습니다. 

소스 코드는 제 깃헙의 https://github.com/yunyong/tui-editor-react-example 여기에서,

데모 페이지는 여기 에서 확인하실 수 있습니다.