NABI NOTE란? ​

nabi-note 는 브라우저에서 동작하는 오픈소스 WYSIWYG 에디터입니다. MIT 라이선스입니다.

React·Vue·바닐라에서 쓰는 방식이 같습니다. 연결하는 것은 넣는 값(html)과 받는 콜백(onChange) 둘입니다.

값은 한 길로만 드나듭니다 ​

들어오는 값도 나가는 값도 같은 필터를 지납니다.

sourceHtml ─(필터)─▶ soul ─▶ flutter        html 옵션 · setHtml() · 붙여넣기
flutter ─(필터)─▶ soul ─▶ outputHtml        onChange · getHtml() · 클립보드

그래서 getHtml() 은 편집하는 동안 브라우저가 남긴 잡다한 마크업을 그대로 내보내지 않고, 지금 DOM 을 다시 필터에 통과시킵니다. 필터(filter)는 멱등(idempotent)이라 onChange 로 받은 값을 그대로 setHtml() 에 되돌리면 값이 그대로입니다.

자리마다 이름이 다른 이유와 그 넷의 뜻은 용어 에 있습니다.

서식은 전부 날개입니다 ​

다른 에디터에서 "플러그인" 이라고 부르는 단위를 날개(wing) 라고 부릅니다. 코어가 직접 아는 마크업은 문단(p)과 줄바꿈(br), 그리고 평문이고, 제목·리스트·표·굵게는 전부 날개입니다.

등록하지 않은 마크업은 껍데기가 벗겨져 평문(plain text)으로 떨어집니다.

import { nabi, bold } from 'nabi-note'

nabi.filter('<p><b>굵게</b> <em>기울임</em></p>')
// '<p>굵게 기울임</p>'         — 아무 wing 도 없음

nabi.filter('<p><b>굵게</b> <em>기울임</em></p>', { wings: [bold()] })
// '<p><b>굵게</b> 기울임</p>'   — bold 만 살아남음

"이 에디터로 무엇을 쓸 수 있는가" 의 답은 등록한 날개 목록입니다.

제약 ​

React 와 Vue 를 import 하지 않고 순수 DOM API 만 씁니다. 한 페이지에서 서로 다른 프레임워크와 버전 조합으로 함께 쓰이기 때문입니다.

문법 사전은 패키지에 싣지 않습니다. 코드 블록의 색칠은 호스트가 물리는 highlight 훅으로 들어옵니다.

다음 문서 ​

• 동작 원리 — 값이 드나드는 길
• 커스텀 날개 만들기 — 없는 서식을 직접 만들기