Newtil Editor

Appearance

미디어 삽입 ​

툴바의 이미지·그림판·동영상 버튼, 또는 슬래시 명령 /이미지, /그림판, /동영상, /오디오, /코드 임베드(영문 image·drawing·video·audio·embed 로도 검색된다)로 넣는다. 이미지·영상·임베드는 고르면 오른쪽 아래 손잡이로 폭을 바꿀 수 있고, 폭을 바꾼 것만 width 속성이 저장된다.

이미지 ​

넣는 길 ​

길동작
툴바 버튼 · /이미지파일 선택 창. 취소하면 URL 과 대체 텍스트를 묻는다
붙여넣기 · 끌어놓기 (0.10.8)클립보드·드롭의 image/* 파일. 끌어놓은 자리에 들어간다
그림판캡처 위에 그려 PNG 로

모두 같은 onImageUpload 훅을 탄다. 훅이 없으면 data URL(base64) 로 본문에 들어가 문서가 커지므로 실서비스에서는 훅을 둔다.

업로드 훅 ​

js
editor.onImageUpload = async (file) => {
  const form = new FormData();
  form.append("file", file);
  const res = await fetch("/api/upload", { method: "POST", body: form });
  return (await res.json()).url;
};
  • 훅 있음 → 서버에 올리고 반환 URL 사용
  • 훅이 던짐 → data URL 로 대체
  • 훅 없음 → data URL

대체 텍스트(alt)는 파일 이름에서 확장자를 떼고 -·_ 를 공백으로 바꿔 만든다.

폭 · 정렬 · 테두리 ​

이미지를 클릭하면 오른쪽 아래 손잡이가 보인다. 끌어서 폭을 바꾸고(최소 80px, 최대 편집 영역 폭, 높이는 비율대로) 원래 크기로 되돌린다. 같은 자리에 정렬(왼쪽/가운데/오른쪽)과 테두리(얇은 선/굵은 선/점선/둥근 모서리/그림자) 도구가 있다(0.10.9).

폭·정렬·테두리 중 하나라도 있으면 <img src alt title width="480" align="center" data-border="thin"> 로, 아니면 ![alt](src) 그대로 저장된다.

비디오 ​

파일 URL ​

플랫폼 링크가 아니면 파일 주소로 보고 <video src controls> 로 넣는다.

플랫폼 임베드 ​

플랫폼 URL 을 넣으면 <iframe> 임베드로 바뀐다.

플랫폼예시 URL
YouTubehttps://www.youtube.com/watch?v=ABC123, https://youtu.be/ABC123, …/shorts/ABC123
Vimeohttps://vimeo.com/12345
Loomhttps://www.loom.com/share/abc123
Dailymotionhttps://www.dailymotion.com/video/x1234, https://dai.ly/x1234
Wistiahttps://home.wistia.com/medias/abc123
네이버TVhttps://tv.naver.com/v/12345
카카오TVhttps://tv.kakao.com/v/12345, https://tv.kakao.com/channel/…/cliplink/12345

폭을 바꾸면 width 와 16:9 height 를 같이 저장한다(0.8.2) — CSS 가 없는 뷰어에서도 같은 크기.

네이버TV / 카카오TV

일부 영상은 업로더가 임베드를 허용하지 않거나 지역 제한이 있어 재생되지 않을 수 있다. 플랫폼 정책이다.

오디오 ​

/오디오(audio). 지원 플랫폼과 고정 높이:

플랫폼예시 URL높이
Spotify 트랙https://open.spotify.com/track/…152px
Spotify 앨범 · 플레이리스트 · 에피소드 · 쇼 · 아티스트https://open.spotify.com/album/…352px
SoundCloudhttps://soundcloud.com/artist/track166px

코드 임베드 ​

/코드 임베드(embed). 현재 지원:

플랫폼예시 URL높이
CodePenhttps://codepen.io/user/pen/abc (full·embed·details 도 됨)400px

지원하지 않는 URL 은 안내(messages.embedInvalid / audioInvalid)를 띄우고 넣지 않는다.

영상·임베드 선택 ​

떠 있는 iframe/영상은 클릭을 삼키므로, 고르지 않은 동안 투명 덮개가 클릭을 받아 노드를 고르고 고른 뒤엔 덮개가 사라져 재생 조작이 된다(0.8.3).

Copyright © 2026 Newlecture