유튜브

설명

youtube() 은 유튜브 임베드(<iframe>)를 소유(claim)합니다. 코어는 iframe 을 기본으로 버리므로 이 wing 을 켰을 때만 살아남습니다.

툴바나 @ 메뉴에서 고르면 주소 상자가 뜹니다. 입력하는 대로 미리보기가 따라오고, 유튜브 주소가 아니면 확인이 막힙니다. 평문(plain text) 주소를 붙여넣어도 임베드가 됩니다.
watch?v= · youtu.be/ · /embed/ · /shorts/ · /v/ · /live/ 를 모두 인정합니다 (www.·m.·music. 접두사와 youtube-nocookie.com 포함).
넘어온 src 를 믿지 않습니다. 영상 id 11자만 뽑아 주소를 새로 조립하므로, 무엇이 들어왔든 출력은 언제나 https://www.youtube-nocookie.com/embed/<id> 한 모양입니다. 호스트 판정도 문자열 포함이 아니라 주소 파싱이라 youtube.com.evil.test 같은 주소는 걸리지 않습니다.
폭·비율·테두리 0 만 인라인 style 로 굳습니다. 시트(stylesheet) 없이 그리면 기본 300×150 상자가 되기 때문입니다. 정렬 마진은 align wing 이 이어 붙입니다.
속이 없는 물건 블록(object block)이라 캐럿(caret)이 안으로 들어가지 않습니다. 틈(gap)에 닿으면 통째로 선택(whole selection)되고, 화살표로 이웃 줄로 빠져나갑니다.
캐럿이 임베드 옆에 있으면 상황 줄(context row)에 영상 삭제가 뜹니다.
속성 이름과 영상 id 를 뽑는 함수는 상수로도 나갑니다 — EMBED_ATTR · EMBED_KIND · youtubeVideoId.

데모

wing

HTML에디터를 불러오는 중…

미리보기위의 값을 읽는 사람 화면에 그대로 그린 자리입니다. 편집 화면에서는 안 도는 기능이 여기서 동작합니다 — 표 제목을 눌러 정렬하고, 이미지를 눌러 크게 보세요.

설치

npm install nabi-note

코드

import { nabi } from 'nabi-note'
import 'nabi-note/style.css'

nabi.create('#editor', {
  wings: [],
  locale: 'ko',
  onChange: (html) => 저장(html),
})

유튜브 ​

설명 ​

데모 ​

유튜브

설명

데모