Cuerpo -> Decoraciones -> Imagen de fondo
Como solución para el trasfondo corporal, utilizo las siguientes acciones:guardar el fondo del cuerpo en la base de datos por separado de los componentes y estilos, mediante 'editor. DomComponents.getWrapper().attributes.style'Cuando se carga la plantilla, establece el estilo mediante 'editor. DomComponents.getWrapper...
Lee la respuesta completa abajo ↓Pregunta
Versión 0.14.25 | Copia local GrapesJS Probado en: Chrome 68, Firefox 61
Añade una imagen de fondo en "Cuerpo (#wrapper seleccionado) -> Decoraciones -> Fondo -> Capa # -> Imagen", guarda en la base de datos, actualiza la página, carga desde la base de datos, fondo en blanco. Lo mismo con la imagen o el color.
Añadiendo antecedentes ! Añadiendo contexto
Página de actualización ! Después de actualizar la página
Y, ¿cómo puedo añadir un gif o vídeo de imagen de fondo? ¿Necesitas retirar una solicitud?
Gracias.
Respuestas (3)
Como solución para el trasfondo corporal, utilizo las siguientes acciones:
- guardar el fondo del cuerpo en la base de datos por separado de los componentes y estilos, mediante 'editor. DomComponents.getWrapper().attributes.style'
- Cuando se carga la plantilla, establece el estilo mediante 'editor. DomComponents.getWrapper().setStyle(/set propios styles/)'
- Tela transparente con 'editor. DomComponents.getWrapper().setStyle('')', pero esto no elimina el trasfondo de los rasgos
Necesito saber qué se almacena en la base de datos y cómo se carga.
Hola, este es el código.
<div id="builder"></div>
<script type="text/javascript">
var token = "{{ csrf_token() }}";
var editor = grapesjs.init({
fromElement: 1,
clearOnRender: cierto,
Contenedor: '#builder',
Plugins: ['GJS-Preset-Newsletter', 'GJS-Blocks-Basic', 'GJS-Blocks-FlexBox'],
pluginsOpts: {
'gjs-blocks-basic': { categoría: falso },
},
storageManager: {
guardado automático: falso,
fijaPasos antes de guardar: 1,
Tipo: 'A distancia',
urlStore: '/dashboard/pages/builder/' + {{ $page->id }},
urlLoad: '/dashboard/pages/builder/' + {{ $page->id }} + '/load',
contentTypeJson: cierto,
params: { _token:token },
},
assetManager: {
Activos: {! !Vacío($page->constructor['GJS-Activos'])? $page->constructor[''GJS-Assets']: '[]' !!},
storeOnChange : cierto,
storeAfterUpload: cierto,
subir: '/dashboard/pages/builder/' + {{ $page->id }} + '/postimages',
uploadName: 'imágenes',
Params: { _token:token, enctype:'multipart/form-data' },
autoAdd: 1,
},
});
Activos VAR = editor. AssetManager.getAll();
assets.on('remove', function(asset) {
var removefile = asset.get('src').split('/').reverse()[0];
$.ajax({
URL: '/dashboard/pages/builder/' + {{ $page->id }} + '/postimages',
tipo: 'POST',
datos: { archivo:removefile, _token:token },
éxito: función(respuesta){
assets.remove(asset.get('src'));
}
});
});
editor. Panels.addButton
('opciones',
[{
id: 'guardar-db',
claseNombre: 'fa fa-floppy-o',
Comandamiento: 'guardar-db',
atributos: {título: 'Guardar'}
}]
);
editor. Commands.add
('guardar-db',
{
run: function(editor, sender)
{
sender & & sender.set('active');
editor.store();
}
});
editor. Panels.removeButton("opciones", ["export-plantilla", "gjs-toggle-imágenes", "gjs-open-import-plantilla"]);
editor.on('storage:load', function(e) {
console.log('Cargado', e);
});
editor.on('storage:store', function(e) {
console.log('Almacenado', e);
});
var btnClass = editor. Panels.addButton
('opciones',
[{
id: 'añadir clase',
claseNombre: 'fa fa-plus',
Orden: 'añadir clase',
atributos: {título: 'Añadir Zona de Clicker'}
}]
);
var cmdClass = editor. Commands.add
('añadir clase',
{
run: function(editor, sender)
{
var componentModel = editor.getSelected();
componentModel.addClass('open-box');
sender & sender.set('active', true);
},
parada: función(editor, remitente)
{
var componentModel = editor.getSelected();
componentModel.removeClass('open-box');
sender & & sender.set('active', false);
}
}
);
</script>
Este es el código php: store
constructor de funciones públicaCorreo(página $page, Solicitud $request)
{
if (!empty($page->existes) Y Gate::permits('page-access', $page)) {
$page->constructor = json_encode($request->excepto('_token'));
$page->guardar();
return ['status' => 'éxito', 'mensaje' => '¡Tu página se ha guardado con éxito!'];
}
Sesión::flash('flashSession', ['status' => 'peligro', 'mensaje' => 'Error, ¡no se puede construir esta página!']);
redirección de retorno ('panel/páginas');
}
para carga
publicpublic function builderLoad(Página $page)
{
if (!empty($page->existes) Y Gate::permits('page-access', $page)) {
retorno json_decode($page->constructor, cierto);
}
Sesión::flash('flashSession', ['status' => 'peligro', 'mensaje' => 'Error, ¡no se puede construir esta página!']);
redirección de retorno ('panel/páginas');
}
Gracias.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1411
Se requiere el activado manual del renderizado del gestor de activos tras abrir la ventana emergente AM
Preguntas P: ¿Estás usando la última versión (las versiones anteriores NO son compatibles)? R: Sí Q. ¿Te enfrentas al error con tu copia lo...
Issue #1196
[Bug] AssetManager no se abre automáticamente en la v0.14.20
Hola, Recientemente actualicé grapesjs de la versión 0.14.17 a la 0.14.20 y descubrí que el Administrador de Activos ya no se abre automáti...
Issue #2044
El desarrollo de npm en un servidor local no funcionó
Hice el procedimiento para iniciar el servidor local usando la rama 'dev' tal y como se describe en README, funcionó en la consola, pero fa...
Issue #1941
[BUG]: Al arrastrar un bloque sobre el lienzo, se añade JS en script, antes de soltar el bloque.
Estás enviando un BUG ¿Estás usando la última versión (las versiones antiguas NO están soportadas)? v0.14.57 ¿Te enfrentas al error con tu...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.