Insluiten
Insluiten is een eenvoudige manier om de app toe te voegen aan uw website. Voeg de volgende code toe aan je website:
<iframe src="https://web.butterfly.linwood.dev/embed" width="100%" height="500px" allowtransparency="true"></iframe>Instellingen
Section titled “Instellingen”| Optie | Type | Standaard | Beschrijving |
|---|---|---|---|
| opslaan | Boolean (true, false) | true | Schakel opslaan in. Indien uitgeschakeld wordt alleen een afsluitknop weergegeven |
| editable | Boolean (true, false) | true | Bewerken inschakelen. Indien uitgeschakeld zal het document alleen-lezen zijn |
| taal | String (…, systeem, gebruiker) | system | Taal van het document. Indien systeem wordt de taal van de browser gedetecteerd. Als gebruiker wordt de taal ingesteld op de voorkeur van de gebruiker |
Evenementen
Section titled “Evenementen”Voorbeelden hoe je het gebruikt:
const embedElement = document.querySelector('#butterfly');embedElement.addEventListener('message', (data) => { if(data.detail.type === 'save') { console.log('Saving...', data.detail.message); }});opslaan
Section titled “opslaan”The
saveevent is emitted when the user clicks the save button.
Parameters:
data(TypeList<int>): The data of the document.
afsluiten
Section titled “afsluiten”The
exitevent is emitted when the user clicks the exit button.
Parameters:
data(TypeList<int>): The data of the document.
change
Section titled “change”The
changeevent is emitted when the user changes the document.
Parameters:
data(TypeList<int>): The data of the document.
Methoden
Section titled “Methoden”Voorbeeld hoe je het moet gebruiken:
const embedElement = document.querySelector('#butterfly');embedElement.pushMessage('getData', {});embedElement.addEventListener('message', (data) => { if(data.detail.type === 'getData') { console.log(data.detail.message); }});getData
Section titled “getData”The
getDatamethod returns the data of the document.
Geen parameters.
Returns: List<int>
setData
Section titled “setData”The
setDatamethod sets the data of the document.
Parameters:
data(TypeList<int>): The data of the document.
render
Section titled “render”The
rendermethod renders the document to a png image.
Parameters:
width(TypeNumber): The width of the image.height(TypeNumber): The height of the image.scale(TypeNumber): The scale of the image.renderBackground(TypeBoolean): If true, the background will be rendered.
Returns: String (Base64 encoded image)
renderSVG
Section titled “renderSVG”The
renderSVGmethod renders the document to a svg image.
Parameters:
width(TypeNumber): The width of the image.height(TypeNumber): The height of the image.renderBackground(TypeBoolean): If true, the background will be rendered.
Returns: String (SVG)