Встройка контента в статьи через HTML-код (iframe)


С помощью HTML-кода (iframe) при редактировании статей можно вставлять различный медиаконтент с других ресурсов, которые поддерживают встройку iframe.

В отдельных статьях можно прочитать про встройку Google и видео в статьи Базы знаний.


Встройка draw.io

Для встройки формата draw.io нужно открыть необходимый документ. Нажать на кнопку "Файл" и выбрать общий доступ. В этой вкладке можно настроить доступ к диаграмме - ее будут видеть все или только те, кому она доступна после авторизации. Также можно добавить список людей, у которых будет доступ к диаграмме после авторизации.



После настройки доступа надо скопировать полученную ссылку - она понадобится при встройке.



Теперь надо перейти в Файл -> Встроить -> iFrame для получения кода для встройки диаграммы.



В всплывающем окне выбрать необходимые настройки. Общедоступная ссылка на диаграмму или на копию файла. И как будет отображаться правка: в том же файле или будет создаваться копия. При выборе настроек в поле "Правка" можно вставить ссылку с настроенным ранее доступом. Нажать на кнопку создать.



Скопировать полученный код для встройки диаграммы.



Перейти в режим редактирования статьи. На панели инструментов выбрать "Просмотр HTML-кода". 

Выбрать место и вставить туда скопированное значение. После этого сохранить статью.



После вставки нужно сохранить статью. Файл будет встроен в статью. В режиме чтения статьи его можно будет просматривать и перейти к его редактированию.



Встройка других сервисов

Аналогичным способом (через <iframe>) можно встраивать любой сервис, который официально поддерживает встраивание iframe / HTML-кода.

Если сервис не поддерживает — iframe либо не будет работать, либо это будет нестабильно / небезопасно.


В таблице приведен пример популярных сервисов с пометкой, дают ли они готовый код или ссылку для встраивания (iframe/embed), или такой возможности не предоставляют:

Сервис / инструмент Есть iframe/embed-код (или embed-ссылка)
Draw.io
 
Яндекс Доски
 
Miro
 
Яндекс Карты  
Figma
 
Google Docs / Sheets / Slides / Forms
 
Google Calendar
 



Санкт‑ПетербургЯндекс Карты — транспорт, навигация, поиск мест




Комментарии