Einbetten
Einbetten ist eine einfache Möglichkeit, die App in Ihre Website einzubinden. Fügen Sie den folgenden Code Ihrer Webseite hinzu:
<iframe src="https://butterfly.linwood.dev/embed" width="100%" height="500px" allowtransparency="true"></iframe>
Optionen
Option | Typ | Standard | Beschreibung |
---|---|---|---|
save | Boolean (true, false) | true | Speichern aktivieren. Wenn deaktiviert, wird nur ein Beenden-Button angezeigt |
editable | Boolean (true, false) | true | Bearbeiten aktivieren. Wenn deaktiviert, wird das Dokument schreibgeschützt |
language | String (..., System, Benutzer) | system | Sprache des Dokuments. Wenn System wird die Sprache vom Browser erkannt. Wenn Benutzer, wird die Sprache auf die Benutzereinstellungen gesetzt |
Ereignisse
Beispiele wie man es verwendet:
const embedElement = document.querySelector('#butterfly');
embedElement.addEventListener('message', (data) => {
if(data.detail.type === 'save') {
console.log('Speichern...', data.detail.message);
}
});
save
Das Ereignis
speichern
wird abgesendet, wenn der Benutzer auf den Speicherknopf klickt.
Parameter:
Daten
(TypZeichenkette
): Die Daten des Dokuments.
exit
Das
Exit
Event wird abgesendet, wenn der Benutzer auf den Exit-Button klickt.
Parameter:
Daten
(TypZeichenkette
): Die Daten des Dokuments.
change
Das
Änderungs-
Ereignis wird abgesendet, wenn der Benutzer das Dokument ändert.
Parameter:
Daten
(TypZeichenkette
): Die Daten des Dokuments.
Methoden
Beispiel wie man es nutzt:
const embedElement = document.querySelector('#butterfly');
embedElement.pushMessage('getData', {});
embedElement.addEventListener('message', (data) => {
if(data.detail.type === 'getData') {
console.log(data.detail.message);
}
});
getData
Die
getData
Methode gibt die Daten des Dokuments zurück.
Keine Parameter. Rückgabewerte: Zeichenkette
setData
Die
setData
Methode legt die Daten des Dokuments fest.
Parameter:
Daten
(TypZeichenkette
): Die Daten des Dokuments.
render
Die
Rendering-
Methode macht das Dokument zu einem PNG-Bild.
Parameter:
Breite
(TypNummer
): Die Breite des Bildes.Höhe
(TypNummer
): Die Höhe des Bildes.Skala
(TypNummer
): Die Skala des Bildes.RenderHintergrund
(TypBoolesche
): Falls aktiviert, wird der Hintergrund gerendert.
Gibt zurück: String
(Base64 kodiertes Bild)
renderSVG
Die
RenderSVG
Methode macht das Dokument zu einem svg-Bild.
Parameter:
Breite
(TypNummer
): Die Breite des Bildes.Höhe
(TypNummer
): Die Höhe des Bildes.RenderHintergrund
(TypBoolesche
): Falls aktiviert, wird der Hintergrund gerendert.
Rückgabewerte: Zeichenkette
(SVG)