Перейти к основному контенту

Вставить

Встраивание - это простой способ включить приложение на ваш сайт. Добавьте следующий код на ваш сайт:

<iframe src="https://web.butterfly.linwood.dev/embed" width="100%" height="500px" allowtransparency="true"></iframe>

Варианты

ВариантТипПо умолчаниюОписание
сохранитьЛогическое (true, false)истинаВключить сохранение. Если отключено, будет показана только кнопка выхода
редактируемыйЛогическое (true, false)истинаВключить редактирование. Если отключено, документ будет доступен только для чтения
языкСтрока (..., система, пользователь)системаЯзык документа. Если система, то язык будет обнаружен из браузера. Если пользователь, язык будет установлен в предпочтение пользователей

События

Примеры его использования:

const embedElement = document.querySelector('#butterfly');
embedElement.addEventListener('message', (data) => {
if(data.detail.type === 'save') {
console.log('Сохранение...', data.detail.message);
}
});

сохранить

Событие сохранить производится, когда пользователь нажимает кнопку Сохранить.

Параметры:

  • данные (Тип Список<int>): Данные документа.

выйти

Событие выхода выдается, когда пользователь нажимает кнопку выхода.

Параметры:

  • данные (Тип Список<int>): Данные документа.

изменение

Событие изменения создается при изменении пользователем.

Параметры:

  • данные (Тип Список<int>): Данные документа.

Методы

Пример его использования:

const embedElement = document.querySelector('#butterfly');
embedElement.pushMessage('getData', {});
embedElement.addEventListener('message', (data) => {
if(data.detail.type === 'getData') {
console.log(data.detail.message);
}
});

getData

Метод getData возвращает данные документа.

Нет параметров. Возвраты: Список<int>

настройки данных

Метод setData устанавливает данные документа.

Параметры:

  • данные (Тип Список<int>): Данные документа.

рендер

Метод превращает документ в изображение png.

Параметры:

  • Ширина (Тип Номер): Ширина изображения.
  • Высота (Тип Номер): Высота изображения.
  • масштаб (Тип Номер): Масштаб изображения.
  • renderBackground (Тип Логическое): Если введено значение true, фон будет отображен.

Возвращается: Строка (изображение с кодировкой Base64)

renderSVG

Метод renderSVG отображает документ на изображение в svg.

Параметры:

  • Ширина (Тип Номер): Ширина изображения.
  • Высота (Тип Номер): Высота изображения.
  • renderBackground (Тип Логическое): Если введено значение true, фон будет отображен.

Возврат: Строка (SVG)