Параметры встраивания HTML

Print Friendly, PDF & EmailРаспечатать/сохранить в PDF

Используйте «Файл» > «Экспортировать как» > «HTML», чтобы создать HTML-разметку, которую затем можно внедрить в HTML-страницу или службу, такую как платформа для ведения блога, для отображения схемы.

Разметка HTML требует загрузки удаленного сценария для отображения схемы на странице. Встроенный HTML поддерживает страницы, ссылки, свертывание/развертывание, слои, масштабирование, математический набор текста и включает в себя встроенный лайтбокс, а также отображение в виде векторного изображения, подходящего для дисплеев Retina.

Опции

  • Включить копию моей диаграммы: по умолчанию включает XML-копию вашей диаграммы.
  • Общедоступный URL-адрес диаграммы: использует общедоступный URL-адрес для загрузки диаграммы, если он доступен.
  • Ссылка: указывает, как открывать ссылки (автоматически означает, что относительные ссылки и якоря открываются в одном окне).
  • Цвет границы: устанавливает цвет выделения для границы фигур со ссылками.
  • Масштаб: указывает, должна ли программа просмотра иметь панель инструментов с функцией масштабирования и начальным значением масштабирования (по умолчанию — 100%).
  • Ссылка: выделяет фигуры со ссылками заданным цветом (по умолчанию #0000ff).
  • Подстроить по размеру: регулирует диаграмму, чтобы заполнить доступную ширину страницы или контейнера.
  • Слои: указывает, могут ли отдельные слои отображаться или скрываться в средстве просмотра и лайтбоксе.
  • Лайтбокс: открывает диаграмму в новой вкладке или с помощью встроенного лайтбокса.
    Показать кнопку редактирования: показывает кнопку «Открыть в новом окне» в лайтбоксе.

Если вы включите Слои или Масштаб, панель инструментов будет отображаться с этими элементами управления на диаграмме. Когда вы включили Zoom, размер контейнера будет меняться по мере увеличения/уменьшения масштаба.

Конфигурация и данные хранятся в объекте JSON в атрибуте data-mxgraph. Для настройки средства просмотра используйте следующие параметры:

  • xml/url=data: Указывает XML или URL-адрес для схемы. URL имеет приоритет над XML.
  • toolbar=[pages|zoom|layers|lightbox|custom]: Определяет инструменты для включения на панель инструментов (Например toolbar=layers lightbox). Пользовательские записи должны иметь соответствующий ключ в toolbarButtons.
  • toolbar-buttons={...}: Определяет кнопки панели инструментов с помощью формы: {key:{title: string, image: base64-encoded, handler: function[, enabled: false]}, key...}
  • toolbar-nohide=true: Обеспечивает постоянное отображение панели инструментов.
  • max-height=value: Устанавливает максимальную начальную высоту диаграммы.
  • auto-fit=false: Отключает автоматическое масштабирование (если кнопки масштабирования не видны).
  • auto-crop=true: Включает автоматическую обрезку, если слои можно переключать.
  • check-visible-state=false: Отключает отложенный рендеринг.
  • lightbox=[false|open]: Отключает или принудительно открывает лайтбокс в новом окне.
  • layers=[index0 index1 ...]: Указывает разделенный пробелами список видимых слоев (например layers=0 1).
  • tooltips=false: Отключает всплывающие подсказки.
  • toolbar-position=[top|inline|bottom]: Устанавливает положение панели инструментов (по умолчанию top).
  • zoom=value: Устанавливает начальный масштаб (по умолчанию 1).
  • editable=false: Отключает редактирование из лайтбокса (по умолчанию1).
  • allow-zoom-in=true: Запускает автоматическую подгонку и указывает, zoom > 1 позволено.
  • border=value: Определяет количество отступов вокруг диаграммы (по умолчанию 8).
  • page=value: Выбирает начальную страницу (по умолчанию 0).
  • nav=false: Отключает свертывание/развертывание.
  • resize=[true|false]: Принудительно изменяет размер контейнера или отключает его после внесения изменений.
  • center=[true|false]: Указывает, должна ли диаграмма располагаться по центру (по умолчанию используетсяfalse).
  • target=[self|blank]: Открывает ссылки в том же/новом окне (по умолчанию открывает относительные ссылки и привязки в same окне).
  • move=true: Устанавливает, будет ли свертывание/развертывание перемещать родственные рубрики.
  • title=value: Задает необязательный заголовок для панели инструментов (или всплывающую подсказку, если панель инструментов не видна).
  • edit=url|_blank: Устанавливает необязательную ссылку, когда вы нажимаете на кнопку Открыть в новом окне в лайтбоксе (Где _blank открывает копию диаграммы).

По умолчанию ссылки на привязки, относительные ссылки или ссылки на тот же домен открываются в одном окне, даже если встроенная диаграмма находится внутри iframe. Все остальные ссылки открываются в новом окне, если не указано target=self.

Чтобы закрыть лайтбокс, нажмите клавишу Esc или щелкните более темный фон, значок закрытия (X) в правом верхнем углу или значок закрытия на панели инструментов.

Если граница CSS контейнера прозрачна (по умолчанию) или не равна нулю, граница контейнера изменится, когда вы наведете на нее курсор мыши. Если включено, панель инструментов будет отображаться и будет добавлено поле.

Адаптивный переключатель реализован с использованием параметра max-width:100%.

Требования

Для встроенного HTML требуется поддержка JavaScript. Поддерживаемые браузеры: Microsoft Internet Explorer 6 и более поздние версии, Microsoft Edge, Safari, Chrome, Firefox, Android, iOS, сенсорные устройства Microsoft и Chromebook.