Issue #1441💬 RespondidoAbierto el 19 de septiembre de 2018por ageirReacciones 0

Arrastrar la imagen al lienzo no muestra la imagen

Respuesta rápidapor JulyanoF

@ageir hice algo diferente (para la subida de archivos): y Y para imágenes de lista:

Lee la respuesta completa abajo ↓

Pregunta

Ejecutando la última versión (0.14.29) en el servidor local. Usando el preajuste de página web de ejemplo. Ubuntu 18.04, Chromium 69.

Tengo un problema para arrastrar imágenes al lienzo. Estoy usando un backend de php. La imagen se sube y se añade al gestor de recursos, pero no aparece en el lienzo, solo el icono del archivo que falta y el nombre del archivo subido.

Estoy usando la página de demostración como base. https://grapesjs.com/demo.html Para probarlo, sustituye el gestor de activos en ese archivo por:

all_files se carga realmente vía php, pero el mismo error ocurre si se pone en vacío para las pruebas.
var all_files = [];

assetManager: {
			Tipo de almacenamiento: '',
			storeOnChange: cierto,
			storeAfterUpload: cierto,
			embedAsBase64: false,
			Activos: all_files,
			noAssets: '¡No hay recursos aquí, arrastra para subir!',
			uploadFile: función (e) {
				console.log(argumentos);
				var files = e.dataTransfer ? e.dataTransfer.files: e.target.files;
				var formData = new FormData();
				for (var i in files) {
					formData.append('file-' + i, files[i]);
				}
				$.ajax({
					URL: '/file_upload',
					tipo: 'POST',
					data: formData,
					contentType: false,
					crossDomain: cierto,
					dataType: 'json',
					mimeType: "multipart/form-data",
					procesData: false,
					éxito: función (resultado) {
						var images = result['data'];
						editor. AssetManager.add (imágenes);
					}
				});
			},

cabeceras: {},
			params: {},
			autoAdd: 1,
			uploadText: 'Deja archivos aquí o haz clic para subir.',
			addBtnText: 'Añadir imagen',
			Zona de caída: 0,
			openAssetsOnDrop: 0,
			dropzoneContent: '<div class="dropzone-inner">Drop media aquí.</div>'
			modalTítulo: 'Seleccionar imagen',
		},

La respuesta del servidor al subir la página es la siguiente: '{"data":[{"id":"641","name":"myfile.jpg","type":"image", "src":"/remote/file/641","height":"0","width":"0"}]}'

El elemento añadido al lienzo es así: '<img data-gjs-type="image" alt="myfile.jpg" class="gjs-plh-image gjs-comp-selected" onmousedown="return false">'

Le falta el src para la imagen.

¿Alguna idea de qué estoy haciendo mal?

Por cierto, si uso la demo con almacenamiento local, el arrastrar y soltar funciona perfectamente y la imagen aparece.

Respuestas (3)

JulyanoF19 de septiembre de 2018

@ageir hice algo diferente (para la subida de archivos):

assetManager: {
        Upload: 'addImageEndPoint.php',
        autoAdd: cierto,
    },

y

editor.on('asset:upload:response',function (response) {
    editor. AssetManager.add(respuesta);
});

Y para imágenes de lista:

$.ajax({url: 'listImagesEndPoint.php',
      tipo: 'conseguir',
      dataType: 'json',
      éxito: función(resultado){
          editor. AssetManager.add(result);
      }
});
mathiasbc28 de noviembre de 2018

HOLA @artf,

Tengo el mismo problema, mi configuración es la siguiente:

      assetManager: {
        Upload: 'http://my-url.net/upload',
        función personalizada para gestionar subidas
        uploadFile(e, clb) {
          const files = e.dataTransfer ? e.dataTransfer.files: e.target.files;
          this.onUploadStart();
          return fileUpload(this.config.upload, {file: files[0]})
            .then((data) =editor >. AssetManager.add({src: data.file, tipo: 'image'}))
            .then((text) => this.onUploadResponse(text, clb))
            .catch((err) => this.onUploadError(err));
        },
      },

Esta función funciona bien, de hecho puedo subir imágenes y se mostrarán en el administrador de activos. Para el bloque de imágenes tengo:

const bm = editor. Jefe de bloque;
bm.add('image', {
      etiqueta: 'Image',
      Categoría: '',
      Atributos: {Clase:'GJS-Fonts GJS-F-Image'},
      Contenido: {
        tipo:'imagen',
        Estilo: {color:'negro'},
        activeOnRender: 1
      },
    });

Que se copia directamente del plugin del boletín. Ahora, cuando arrastro el bloque de imagen al lienzo y hago doble clic en la imagen deseada, se añade el componente pero me sale 'src: ''', así que no aparece ninguna imagen. ¿Alguna idea?

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.