Docs › Images and media

Maps and embeds

Google Maps and iframe codes from allowed sites; Kakao and Naver maps as link cards.

Put embed (iframe) codes from other sites in a post: a map to your shop, a survey, a booking widget. Only codes from allowed sites go in.

Try it

Code for this demo

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

Adding one

Click Map / embed code (embed) and paste an address or an <iframe …> code. What happens depends on what it is:

You paste	Result
A video address or video iframe	Inserted as a video.
A Google Maps [Share → Embed a map] code	The map. Allowed by default.
A Kakao Map or Naver Map address (`map.kakao.com`, `kko.to`, `map.naver.com`, `naver.me`)	These sites refuse to be framed, so it goes in as a link card with a message.
A code or https address from a site in `allowedIframeHosts`	That iframe.
Anything else	"This site can't be embedded", nothing inserted.

A height in the iframe code is kept (between 150 and 1200px); otherwise 450px. The width always fills the content.

Allowing sites

createEditor('#editor', {
  allowedIframeHosts: [
    'www.openstreetmap.org',
    'docs.google.com/forms',   // a path limits it to addresses starting with it
  ],
});

Entries are host names; add /path to allow only addresses under that path. Only https works. The list also applies to setHTML, paste and the HTML source view, not just this dialog.

Saved 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>

In the editor it is one piece: click to select it, delete it, or move it with Alt+Shift+↑/↓.

Where it is

embed is in the ⋯ more menu of the board and full presets.

Options

Name	Type	Default	Description
`embed`	toolbar item		Opens the address / embed code dialog.
`allowedIframeHosts`	string[]	[]	Extra iframe hosts; `host/path` limits to a path.
`fetchLinkMeta`	(url) => Promise<LinkMeta \| null>		Title and picture for Kakao / Naver map cards.