지도·퍼가기 코드

찾아오는 길 지도, 설문, 예약 위젯처럼 다른 사이트가 주는 퍼가기(iframe) 코드를 글에 넣습니다. 허용한 사이트의 코드만 들어갑니다.

createEditor('#editor', {
  toolbar: 'embed video | undo redo',
  height: 400,
  allowedIframeHosts: ['www.openstreetmap.org'],
});

넣는 방법

툴바의 지도·퍼가기 코드(embed) 단추를 누르고, 주소나 <iframe …> 코드를 붙여 넣습니다. 들어간 내용에 따라 이렇게 처리합니다.

iframe 코드에 height 가 있으면 그 높이를(150–1200px 사이로), 없으면 450px 을 씁니다. 너비는 항상 본문 너비에 맞춥니다.

사이트 허용하기

createEditor('#editor', {
  allowedIframeHosts: [
    'www.openstreetmap.org',
    'docs.google.com/forms',   // 주소 앞부분까지 적으면 그 경로만 허용
  ],
});

항목은 호스트 이름이고, / 뒤에 경로를 붙이면 그 경로로 시작하는 주소만 허용합니다. https 주소만 됩니다. 이 목록은 퍼가기 창뿐 아니라 setHTML, 붙여넣기, HTML 소스 보기에도 똑같이 적용됩니다.

저장되는 HTML

<div data-embed="" style="margin: 0.8em 0">
  <iframe src="https://www.google.com/maps/embed?pb=…" style="width: 100%; height: 450px; border: 0"
    loading="lazy" allowfullscreen="" title="embed"></iframe>
</div>

에디터 안에서는 한 덩어리로 다뤄집니다. 누르면 고를 수 있고 지우거나 Alt+Shift+↑/↓ 로 옮길 수 있습니다.

툴바에서의 위치

embed 는 board 와 full 프리셋의 ⋯ 더보기 메뉴에 있습니다.

옵션