Arrastrar la imagen al lienzo no muestra la imagen
@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)
@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);
}
});
Debido a tu uploadFile personalizado (¿por qué no usar solo el original???), no estás llamando a la callback https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/FileUploader.js#L105
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.
Issue #1418
[¿INSECTO?] El administrador de activos no elimina archivos en el servidor a menos que se active la subida.
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 68. Asset...
Issue #1020
[¿PREGUNTAS/ERROR?] Conexión no local
Estoy usando la última versión con mi portátil Ubuntu. Node está instalado, "npm start" funciona pero no consigo acceder a grapesjs desde o...
Issue #2014
[BUG] - No se puede obtener contenido de un bloque de enlace
Hola a todos, Estoy usando la versión 0.14.52 de grapesjs. Estoy teniendo el siguiente problema: Cuando dejo un bloque de enlace dentro del...
Issue #2013
[BUG] - No se puede obtener contenido de un bloque de enlace
Hola a todos, Estoy usando la versión 0.14.52 de grapesjs. Estoy teniendo el siguiente problema: Cuando dejo un bloque de enlace dentro del...
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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.