Incrustar
Incrustar es una forma sencilla de incluir la aplicación en tu sitio web. Añade el siguiente código a tu sitio web:
<iframe src="https://butterfly.linwood.dev/embed" width="100%" height="500px" allowtransparency="true"></iframe>
Opciones
Opción | Tipo | Por defecto | Descripción |
---|---|---|---|
save | Boolean (true, false) | true | Activar guardar. Si está desactivado, sólo se mostrará un botón de salida |
editable | Boolean (true, false) | true | Activar la edición. Si está deshabilitado, el documento será de sólo lectura |
language | Cadena (..., sistema, usuario) | system | Idioma del documento. Si el sistema, el idioma se detectará desde el navegador. Si el usuario, el idioma se ajustará a las preferencias de los usuarios |
Eventos
Ejemplos de cómo usarlo:
const embedElement = document.querySelector('#butterfly');
embedElement.addEventListener('message', (data) => {
if(data.detail.type === 'save') {
console.log('Saving...', data.detail.message);
}
});
save
El evento
guardar
se emite cuando el usuario hace clic en el botón guardar.
Parámetros:
data
(EscribaString
): Los datos del documento.
exit
El evento
salir
se emite cuando el usuario hace clic en el botón de salida.
Parámetros:
data
(EscribaString
): Los datos del documento.
change
El evento
cambiar
se emite cuando el usuario cambia el documento.
Parámetros:
data
(EscribaString
): Los datos del documento.
Métodos
Ejemplo de cómo usarlo:
const embedElement = document.querySelector('#butterfly');
embedElement.pushMessage('getData', {});
embedElement.addEventListener('message', (data) => {
if(data.detail.type === 'getData') {
console.log(data.detail.message);
}
});
getData
El método
getData
devuelve los datos del documento.
No hay parámetros. Devuelve: Cadena
setData
El método
setData
establece los datos del documento.
Parámetros:
data
(EscribaString
): Los datos del documento.
render
El método
render
renderiza el documento a una imagen png.
Parámetros:
ancho
(EscribaNúmero
): El ancho de la imagen.altura
(TipoNúmero
): La altura de la imagen.escala
(EscribeNúmero
): La escala de la imagen.renderBackground
(EscribeBoolean
): Si es verdadero, el fondo será renderizado.
Devuelve: String
(imagen codificada en Base64)
renderSVG
El método
renderSVG
renderiza el documento a una imagen svg.
Parámetros:
ancho
(EscribaNúmero
): El ancho de la imagen.altura
(TipoNúmero
): La altura de la imagen.renderBackground
(EscribeBoolean
): Si es verdadero, el fondo será renderizado.
Devuelve: String
(SVG)