Как встроить ментальную карту на свой сайт в виде виджета?

06 марта 2022

Вы можете встроить ментальную карту на свой сайт.

Пример

Mind map moving

Попробуй чтобы перемещаться или уменьшить размеры веток:

Инструкция

В настоящее время конструктор кода находится в стадии разработки. Однако вы можете создать код вручную.

Для этого

1. Создайте ментальную карту и поделитесь ею

Создать ментальную карту можно по этой ссылке: https://mind-map-online.ru/new

2. Скопируйте ссылку в блокнот и добавьте необходимые параметры

Например:

https://ioctopus.online/____Widget__read-only____ae06464c14af8a4449d1bac198678ba1?panelMain=0&menubar=0&freezePanels=1&scrollable=0

Обратите внимание

  • За ссылкой следует ?, затем параметры
  • Параметры разделяются знаком &

Доступные опции

  • menubar=0 - убрать меню
  • panelMain=0 - убрать главное меню
  • panelThemes=0 - убрать меню тем
  • panelIcons=0 - убрать меню иконок
  • panelIcons=open - принудительное открытие панели значков (для общего доступа как редактируемого)
  • panelColors=0 - убрать меню цветовr
  • panelColors=open - принудительное открытие панели цветов (для общего доступа как редактируемого)
  • freezePanels=1 - запретить открытие/закрытие панелек
  • roundedPanels=1 - закругленные углы на панельках
  • scrollable=0 - отключить прокрутку карты
  • isolate=1 - пользователи будут редактировать каждый свою версию вашего файла, в противном случае пользователи будут редактировать один и тот же файл
  • platformMask=IMAGE_URL - маска, которая может быть использована для обрезки карты. Пример маски изображения, Пример a обрезанной ментальной карты.

 

3. Вставьте ссылку в <iframe> и разместите на своем сайте

Шаблон:

<iframe
	width="100%"
	height="500"
	border="0"
	scrolling="no"
	style="border: none;"
	src="THE_LINK"
></iframe>

Где THE_LINK - это ссылка, которую вы сделали в блокноте.

Например:

<iframe
	width="100%"
	height="500"
	border="0"
	scrolling="no"
	style="border: none;"
	src="https://ioctopus.online/____How_to_make_a_mind_map__editable____b5f8cb61b9742e7723e635a7e4d23e57?menubar=0&amp;panelMain=0&amp;panelThemes=0&amp;panelIcons=0&amp;panelColors=open&amp;freezePanels=1&amp;isolate=1&amp;scrollable=0&amp;roundedPanels=1&amp;platformMask=https://ioctopus.online/wp-content/themes/app/blog/how-to-make-a-mind-map/mask4.svg"
></iframe>

Смотрите так же

Как создать ментальную карту

Как освоить все ключевые нюансы создания ментальных карт за 10 минут? А главное - освоить на годы.  Так, чтобы вам не пришлось к этому возвращаться.

Это легко с помощью быстрых интерактивных заданий из этой статьи.

Неочевидное в IOctopus

Когда есть смысл, мы злостно нарушаем правило дизайна: "в интерфейсе всё должно быть очевидно". Но какой в этом может быть смысл? A cмысл в том, чтобы...

Поделиться постом
Комментарии