Issue #1357💬 RespondidoAbierto el 12 de agosto de 2018por ghostReacciones 1

Cuerpo -> Decoraciones -> Imagen de fondo

Respuesta rápidapor maryia-kabash1

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)

maryia-kabash20 de septiembre de 2018

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
artf13 de agosto de 2018

Necesito saber qué se almacena en la base de datos y cómo se carga.

ghost14 de agosto de 2018

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.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.