AssetManager no muestra imágenes subidas
Encontré una solución alternativa y sigue esto #372
Lee la respuesta completa abajo ↓Pregunta
Hola a todos,
Estoy usando grapesjs - 0.14.33.
He implementado con éxito StorageManager en modo remoto, puedo cargar y almacenar datos. He implementado con éxito AssetManager, puedo cargar/subir imágenes.
No consigo entender por qué las subidas de recursos correctamente no aparecen en la ventana emergente de los recursos (seleccionar imagen)
He leído la documentación y el problema, pero no lo entiendo. He probado muchos tipos de salida: [data:{....}].
¿Me falta algún paso?
Estos son mis archivos de configuración:
'var images = [];
<?php $images = $this->plantilla()->getTemplateImages($this->params()->fromRoute('id');? > <?php if(is_array($images):?>Imágenes = <?PHP eco json_encode($images);?>
<?php endif?>
per inizializzare l'editor var editor = grapesjs.init({ Indica dónde iniciar el editor en el editor. También puedes aprobar un HTMLElement Contenedor: '#gjs', clearOnRender: cierto, Tamaño del editor Altura: '100%', /ancho: 'auto',/ Consigue el contenido del lienzo directamente del elemento Como alternativa, podríamos usar: 'components: '<h1>¡Hello World Component!</h1>' `, fromElement: cierto,
assetManager: {
autoAdd: 1,
Recursos: imágenes,
subir: 0,
uploadName: 'archivos',
uploadText: 'Deja archivos aquí o haz clic para subir',
Upload: '<?php echo $uploadUrl;?>',
addBtnText: '<?php echo $this->translate("Aggiungi immagine");? >',
uploadFile: function(e) {
var files = e.dataTransfer ? e.dataTransfer.files: e.target.files;
// ... envía a algún sitio
console.log(archivos);
var formData = new FormData();
for(var i in files){
formData.append('file-'+i, files[i])
}
$.ajax({url: '<?php echo $uploadUrl;?>',
tipo: 'POST',
data: formData,
contentType:false,
crossDomain: cierto,
mimeType: "multipart/form-data",
procesData:false,
éxito: función(resultado){
editor. AssetManager.add(result);
console.log(resultado);
}});
}
},
storageManager: {
Tipo: 'A distancia',
contentTypeJson: cierto,
stepsBeforeSave: 1, // Si el autoguardado está activado, indica cuántos cambios son necesarios antes de que se active el método de almacenamiento
autosave: true, // Almacenar datos automáticamente
autoload: true, // Autoload datos almacenados en init
/*id: 'gjs-nl-',*/
urlStore: '<?php echo $storeUrl;?>',
urlLoad: '<?php echo $loadUrl;?>',
store: function(e) {
console.log ("Tienda");
}
},
Plugins: ['GJS-Preset-Newsletter'], //, 'GJS-plugin-CKEDITOR'
pluginsOpts: {
'gjs-preset-newsletter': {
modalLabelImport: 'Incolla il tuo codice qui sotto e clicca su import',
modalLabelExport: 'Copia il codice e usalo quando vuoi',
codeViewerTheme: 'material',
defaultPlantilla: plantillaImportar,
importPlaceholder: '<table class="table"><tr><td class="cell">¡Hola mundo!</td></tr></table>',
cellStyle: {
'tamaño de fuente': '12px',
'peso de fuente': 300,
'vertical-align': 'arriba',
color: 'rgb(111, 119, 125)',
marje: 0,
relleno: 0,
}
},
/*
'gjs-plugin-ckeditor': {
Posición: 'Centro',
Opciones: {
startupFocus: cierto,
extraAllowedContent: '*(*);*{*}', // Permite cualquier clase y cualquier estilo en línea
allowedContent: true, // Desactivar el formato automático, eliminación de clases, etc.
enterMode: CKEDITOR. ENTER_BR,
extraPlugins: 'sharedspace,justificify,colorbutton,panelbutton,font',
Barra de herramientas: [
{ nombre: 'estilos', objetos: ['Fuente', 'TamañoFuente' ] },
['Negrita', 'Cursiva', 'Subrayado', 'Golpe'],
{nombre: 'párrafo', ítems: [ 'ListaDeNumerada', 'ListaDeMarca']},
{nombre: 'enlaces', objetos: ['Enlace', 'Desvincular']},
{nombre: 'colores', objetos: [ 'TextColor', 'BGColor' ]},
],
}
}
*/
}
});
var mdlClass = 'gjs-mdl-dialog-sm';
var pnm = editor. Paneles;
var cmdm = editor. Órdenes;
VAR MD = Editor. modal;
Aggiunta pulsanti torna indietro avanti e clear all
pnm.addButton('options', [{
id: 'deshacer',
claseNombre: 'fa fa-undo',
atributos: {título: 'Deshacer'},
comando: function(){ editor.runCommand('core:undo') }
},{
id: 'rehacer',
claseNombre: 'fa fa-repeat',
atributos: {título: 'Rehacer'},
comando: function(){ editor.runCommand('core:redo') }
},{
id: 'Claro',
claseNombre: 'fa fa-basura icono-blank',
atributos : {título: 'Claro lienzo'},
Orden: {
run: function(editor, sender) {
sender & & sender.set('active', false);
if(confirm('¿Estás seguro de limpiar el lienzo?')){
editor. DomComponents.clear();
setTimeout(función(){
localStorage.clear()
},0)
}
}
}
},{
id: 'ver-info',
claseNombre: 'fa fa-círculo-pregunta',
comando: 'open-info',
atributos: {
'título': 'Sobre',
'data-tooltip-pos': 'abajo',
},
}]);`Respuestas (2)
Encontré una solución alternativa y sigue esto #372
Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #597
storageManager: Carga desde almacenamiento remoto
Hola, Estoy intentando leer el HTML y el CSS de mi base de datos. Cuando intento cargarlo en el editor, no aparece nada. Puedo almacenar lo...
Issue #1525
Cómo obtener datos de formularios en grapesjs
Hola a todos, Estoy usando el bloque Forms en grapejs y uso grapesjs con angular 6. Pero no entiendo que ¿cómo puedo obtener datos de los f...
Issue #1197
Subida de activos con Laravel 5.5
Hola, Estoy usando grapesjs - 0.14.15 en mi servidor. Intentando subir imágenes de dos maneras diferentes: y con: En mi archivo PHP solo qu...
Issue #957
[Pregunta] Añadir atributos personalizados (datos-) a los recursos/imágenes al subir/seleccionar
Hola, estoy haciendo todo lo posible por encontrar la mejor manera de hacerlo, pero necesito adjuntar dos etiquetas de datos HTML5 personal...
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.