Dos pequeñas cosas
Puedo subir y cargar imágenes en el gestor de recursos. Lo que me falta es que, tras subir la imagen, no se refleja inmediatamente en la lista de imágenes del administrador de activos. Aquí está el problema '''js handleAdd: '<?php base_url(); ?>/dragdropeditor/dragdrop/upload', Así que en tu caso, simplemente llévalo,...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf @arthuralmeidap @sonnylloyd @cmcintosh @daniel-farina
Muchísimas gracias por desarrollar un framework tan increíble. Intenté conseguir casi todas las funcionalidades del boletín predefinido de grapesjs.
Solo necesito ayuda con estas dos pequeñas cosas:
- Puedo subir y cargar imágenes en el gestor de activos. Lo que me falta es que, tras subir la imagen, no se refleja inmediatamente en la lista de imágenes del administrador de activos.
Ya he seguido los números https://github.com/artf/grapesjs/issues/216 y https://github.com/artf/grapesjs/issues/372
No parece funcionar.
Esta es mi respuesta en json desde el servidor tras subir los archivos:
'[{"tipo":"imagen","src":"http://cimailer.dev/uploads/1.jpg","altura":"350","peso":"250"},{"tipo":"imagen", "src":"http://cimailer.dev/uploads/Capture.JPG","altura":"350","peso":"250"}]'
Este es mi código completo:
'''js
<script type="text/javascript"> $( documento ).ready(function() { var id = '<?PHP eco $this->uri->segment('3'); ?>'; $.get( 'http://cimailer.dev/dragdropeditor/dragdrop/fetch/'+id, function(data) { var obj = jQuery.parseJSON(data); $.each(obj, function(key,value) { plantilla = obj.id; nombre de plantilla = obj.nombre de plantilla; templatedata = obj.templatedata; }); $( "#templatename" ).val(nombre de la plantilla); $.get( "http://cimailer.dev/dragdropeditor/dragdrop/listimages", function( data ) { if(data.length > 0){ var images =JSON.parse(data); } si no, { var images = []; } var editor = grapesjs.init ({ Altura: '100%', componentes: templatedata, contenedor: '#gjs', Plugins: ['GJS-preset-newsletter', 'GJS-plugin-export'], assetManager: { Recursos: imágenes, modalTítulo: 'Seleccionar imagen', autoAdd: 1, uploadName: 'archivos', Tipo de almacenamiento: 'remoto', storeOnChange: cierto, storeAfterUpload: cierto, subir: '<?php base_url(); ?>/dragdropeditor/arrastrar/subir', uploadText: 'Deja archivos aquí o haz clic para subir', handleAdd: '<?php base_url(); ?>/dragdropeditor/dragdrop/upload', }, storageManager: { id: '', autoload: false, guardado automático: falso, storeComponents: false, storeStyles: falso, storeHtml: cierto, storeCss: cierto, Tipo: 'A distancia', urlStore: '<?php echo base_url(); ?>arrastrar/arrastrar/soltar/actualizar/'+id, urlLoad: '<?php echo base_url(); ?>arrastrar/arrastrar/soltar/buscar/'+id, contentTypeJson: cierto, }, pluginsOpts: { 'gjs-plugin-export': { btnLabel: 'Export Code', preHtml: '<!doctype><html><head><link rel="stylesheet" href="./css/style.css"></head><body>' }, 'gjs-preset-newsletter': { modalLabelImport: 'Pega todo tu código aquí abajo y haz clic en importar', modalLabelExport: 'Copia el código y úsalo donde quieras', codeViewerTheme: 'material', defaultPlantilla: plantillaImportar, importPlaceholder: '<!DOCTYPE html><html><head><title></title></head><body></body></html>', cellStyle: { 'tamaño de fuente': '12px', 'peso de fuente': 300, 'vertical-align': 'arriba', color: 'rgb(111, 119, 125)', marje: 0, relleno: 0, } } } }); Activos VAR = editor. AssetManager.getAll() // <- Colección Backbone assets.on('remove', function(asset) { var removefile = asset.get('src'); $.ajax({ URL: '<?php echo base_url(); ?>arrastrar-soltar/eliminar', Tipo: 'Publicación', datos: {archivo: removefile}, éxito: función(respuesta){ } }); }); Vamos a añadir a esta demo la posibilidad de probar nuestros boletines var mdlClass = 'gjs-mdl-dialog-sm'; var pnm = editor. Paneles; var cmdm = editor. Órdenes; var testContainer = document.getElementById("edit-plantilla"); var contentEl = testContainer.querySelector('input[name=body]'); VAR MD = Editor. modal; cmdm.add('edit-template', { run(editor, sendero) { sender.set('active', 0); var modalContent = md.getContentEl(); var mdlDialog = document.querySelector('.gjs-mdl-dialog'); var cmdGetCode = cmdm.get('gjs-get-inlined-html'); contentEl.value = cmdGetCode & & cmdGetCode.run(editor); mdlDialog.ClassName += ' ' + mdlClass; testContainer.style.display = 'bloque'; md.setTitle('Introducir nombre de plantilla'); md.setContent(''); md.setContent(testContainer); md.open(); md.getModel().once('change:open', function() { mdlDialog.ClassName = mdlDialog.className.replace(mdlClass, ''); Estado limpio }) } }); pnm.addButton('options', { id: 'edit-plantilla', claseNombre: 'fa fa-floppy-o icon-blank', comando: 'editar-plantilla', atributos: { 'título': 'Editar plantilla', 'data-tooltip-pos': 'abajo', }, }); FA FA-Refresh var statusFormElC = document.querySelector('.form-status'); var statusFormEl = document.querySelector('.form-status i'); var ajaxTest = ajaxable(testContainer). onStart(function(){ statusFormEl.className = 'fa fa-spinner anim-spin'; statusFormElC.style.opacity = '1'; statusFormElC.className = 'form-status'; setTimeout(function() { window.location.href = "<?php eco base_url(); ?>plantillas/lista"; }, 600); window.onbeforeunload = null; }) .onResponse(function(res){ console.log(res); if (res.data) { statusFormElC.style.opacity = '0'; statusFormEl.removeAttribute('data-tooltip'); md.close(); } else if(res.errors){ statusFormEl.className = 'fa fa-círculo-exclamación'; statusFormEl.setAttribute('data-tooltip', res.errors); statusFormElC.className = 'form-status text-danger'; } }); Notificador de advertencia simple var origWarn = console.warn; toastr.options = { closeButton: cierto, preventDuplicates: cierto, showDuración: 250, ocultarDuración: 150 }; consola.warn = función (msg) { toastr.warning (MSG); origWarn (MSG); }; $(documento).ready(función () { Embelecer las descripciones emergentes $('*[título]').each(function () { var el = $(esto); var title = el.attr('title').trim(); if(!título) regresar; el.attr('data-tooltip', el.attr('título')); el.attr('título', ''); }); }); }); }); }); </script>
También he observado que el botón de Añadir imagen no parece funcionar,
! [captura](https://user-images.githubusercontent.com/16983847/31320634-9cc58376-ac95-11e7-82a9-fcb9430d5797.JPG)
Si intento darle una ruta online, muestra la imagen pero no la descarga ni la añade al gestor de recursos. Y no funciona para el camino local.
De cualquier forma que pueda lograrlo, si no, ¿cómo puedo ocultarlo?
2) Quiero mostrar el botón de vista previa del boletín tal y como se usa para las plantillas de páginas web:
! [captura](https://user-images.githubusercontent.com/16983847/31320584-85d3fc8e-ac94-11e7-9dfb-74298e543bfb.JPG)
Gracias.
Respuestas (3)
- Puedo subir y cargar imágenes en el gestor de recursos. Lo que me falta es que, tras subir la imagen, no se refleja inmediatamente en la lista de imágenes del administrador de activos.
Aquí está el problema '''js handleAdd: '<?php base_url(); ?>/dragdropeditor/dragdrop/upload',
En https://github.com/artf/grapesjs/blob/dev/src/asset_manager/config/config.js explico por qué lo necesitas
'''js
Gestiona la URL de la imagen enviada desde el formulario integrado de 'Añadir imagen'
@example
handleAdd: (textFromInput) => {
// algún cheque...
editor. AssetManager.add(textFromInput);
// }
handleAdd: '',
Así que en tu caso, simplemente llévalo, no lo necesitas. Puedes ocultar la entrada de 'Añadir imagen' con CSS si quieres
- Quiero mostrar el botón de vista previa del boletín tal y como se usa para las plantillas de páginas web
Lo elimino aquí https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/buttons.js#L36-L37 Puedes volver a añadirlo
Hola @artf
No estoy seguro sobre usar https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/buttons.js#L36-L37
Estoy usando la versión comprimida: ' <script src="js/grapes.min.js"></script> <script src="js/grapesjs-preset-newsletter.min.js"></script>'
También quería saber por qué el botón de Añadir imagen no parece funcionar. Quiero decir, no lo tengo claro
puedo subir y cargar imágenes en el administrador de recursos. Lo que me falta es que, tras subir la imagen, no aparece inmediatamente en la lista de imágenes del administrador de activos.
¿Por qué tengo que actualizar la página cada vez? ¿Es posible cargar las imágenes directamente después de subirlas?
El botón de Añadir funciona exactamente como se espera, no debería subir/descargar cosas. Si necesitas comportamientos personalizados, añade tu interfaz de usuario
¿Por qué tengo que actualizar la página cada vez? ¿Es posible cargar las imágenes directamente después de subirlas?
Ya te he dicho dónde está el problema... Lee mi respuesta anterior
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1605
¿Podemos implementar las opciones de Pegar como editor de texto enriquecido en RTE?
Hola @artf he pasado por este Editor de arrastrar y soltar y qué trabajo tan increíble. También leí tu documentación e intenté ampliar el e...
Issue #428
Cambiar el fondo del cuerpo
Hola, Antes que nada, quiero daros las gracias por este proyecto increíble! Tengo algunas preguntas sobre el editor, y más concretamente so...
Issue #1754
[Bug] problema de estilización con ckeditor(4)
¡Hola @artf todos! ¡Gracias de nuevo por el trabajo increíble! Intenté implementar ckeditor con grapesjs y parece funcionar bastante bien,...
Issue #444
¿Cómo cargar el enlace CSS en la etiqueta de cabeza?
Hola, Antes que nada, gracias por aportar un framework de js tan increíble. Soy muy nuevo en Grapesjs. Y también github. https://github.com...
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.