Componentes y Js - Plantilla de carga

Hola Arthur, ¿puedes crear una demo del problema?

Otro problema: el tipo de datos de gjs se cambia a predeterminado en lugar de mantener el nombre de mi tipo de componente personalizado cuando se carga la plantilla. Parece que el método isComponent no se llama cuando tengo un JS conectado

¿Dependes de HTML para almacenar/cargar?

Tengo el mismo problema. Cuando suelto un componente con un script, funciona, pero después de actualizar, no lo hace Puedes probarlo con uvapesjs-component-countdown, después de refrescar, los dígitos no aparecen. Esta es mi configuración (se usa en una aplicación Angular, también me vendría bien algo de ayuda).

ACTUALIZACIÓN: tras investigar, parece que JS no se guarda en LocalStorage y tampoco intenta volver a renderizar el componente para añadir JS si falta, y si intento usar getScript() tras recargar, devuelve una cadena vacía.

'''javascript this.editor = grapesjs.init({ Indica dónde iniciar el editor en el editor. También puedes aprobar un HTMLElement contenedor: this.grapeJsElement.nativeElement, Consigue el contenido del lienzo directamente del elemento Como alternativa, podríamos usar: 'components: '<h1>¡Hello World Component!</h1>' `, fromElement: cierto, Tamaño del editor autorender: 0, Altura: '100%', Ancho: '100%', avisoOnUnload: cierto, Offsets de exhibición: falso, showOffsetsSelected: cierto, forceClass: cierto, LOG: Cierto, permitenScripts: 1, mediaCondición: 'min-width', keepEmptyTextNodes: 0, jsInHtml: cierto, nativoDnD: 1, múltipleSelección: 1, exportWrapper: 1, EnvolturaEsCuerpo: 1, avoidInlineStyle: 1, avoidDefaults: 0, clearStyles: 0,

lienzo: { guiones: [ "activos/jquery.min.js" ], Estilos: [ "activos/bootstrap.min.css", "activos/ms-print-pdf.css" ] },

Configuraciones para capas layerManager: { appendTo: this.grapejsLayersContainer.nativeElement },

Configuraciones de paneles panels: this.getPanelsConfig(),

Configuraciones para Selector Manager selectorManager: { appendTo: this.grapejsStyleContainer.nativeElement, },

Configuraciones para el Administrador de dispositivos Gestor de dispositivos: this.getDeviceManagerConfig(),

Configuraciones para el Gestor de Estilo Gestor de estilo: this.getStyleManagerConfig(),

Configuraciones para Block Manager blockManager: this.getBlockManagerConfig(),

traitManager: { appendTo: this.grapejsTraitsContainer.nativeElement, } });

this.setDeviceViewCommands(); this.setRightPanelCommands(); this.addComponents()

this.editor.Commands.add('save-fisa', { run: (editor, elemento) => { this.saveFisa (editor); }, parada: (editor, elemento) => {

} });

this.editor.render(); console.log(editor); }

ngAfterViewInit() { console.log(this.grapeJsElement); }

saveFisa(editor) { console.log("Html:", editor.getHtml()); console.log("Css:", editor.getCss()); console.log("JS:", editor.getJs()) console.log("Componenets:", editor.getComponents()) }

MARK:- Configuraciones private getPanelsConfig() { return { Valores por defecto: [ { id: 'panel-top', EL: '.panel__top', }, { id: 'panel-derecha', EL: '.panel__right', }, { id: 'interruptor de dispositivo', botones: [{ id: 'escritorio', activo: true, // activo por defecto NombreClase: 'btn-toggle-borders', etiqueta: '<i class="fas fa-escritorio"></i>', comando: 'set-desktop-view', // Comando incorporado Contexto: "device-view-change", Activable: falso, }, { id: 'tableta', NombreClase: 'btn-toggle-borders', etiqueta: '<i class="fas fa-tablet-alt"></i>', comando: 'set-tablet-view', // Comando incorporado Contexto: "device-view-change", Activable: falso, }, { id: 'móvil', NombreClase: 'btn-toggle-borders', etiqueta: '<i class="fas fa-mobile-alt"></i>', comando: 'set-mobile-view', // Comando incorporado Contexto: "device-view-change", Activable: falso, }], EL: '.panel__devices' }, { id: 'Acciones-básicas', EL: '.panel__basic-acciones', botones: [ { Id: 'visibilidad', activo: true, // activo por defecto NombreClase: 'btn-toggle-borders', etiqueta: '<u>B</u>', comando: 'sw-visibility', // Comando incorporado }, { id: 'exportar', NombreClase: 'btn-open-export', etiqueta: 'Exp', comando: 'export-plantilla', contexto: 'export-plantilla', // Para agrupar el contexto de botones del mismo panel }, { id: 'show-json', NombreClase: 'btn-show-json', etiqueta: 'JSON', Contexto: 'show-json', comando(editor) { editor. Modal.setTitle('Components JSON') .setContent('<textarea style="width:100%; height: 250px;"> ${JSON.stringify(editor.getComponents())} ')</textarea> .open(); }, }, { id: "save-fisa", claseNombre: "btn", etiqueta: "<I clase='fa fa-save'></i>", Orden: 'Salvar-FISA', Activable: falso, } ], }, { id: "panel-switcher", EL: ".panel__switcher", botones: [ { id: 'capas de exhibición', ACTIVO: Cierto, NombreClase: "tab-btn", etiqueta: "<i class='fas fa-layer-group'></i>", Orden: 'Mostrar capas', Una vez activada, desactiva la posibilidad de desactivarlo Activable: falso, }, { id: 'estilos de exhibición', ACTIVO: Cierto, NombreClase: "tab-btn", etiqueta: "<clase i='fas fa-pincel'></i>", Orden: 'Estilos de Exhibición', Activable: falso, }, { id: 'bloques de exposición', ACTIVO: Cierto, NombreClase: "tab-btn", etiqueta: "<I class='fas fa-th-large'></i>", comando: "bloques de exhibición", Activable: falso, }, { id: 'Rasgos de exhibición', ACTIVO: Cierto, NombreClase: "tab-btn", etiqueta: "<I clase='fas fa-cogs'></i>", comando: "mostrar rasgos", Activable: falso, } ] } ], } }

private getBlockManagerConfig() { return { appendTo: this.grapeJsBlocksElement.nativeElement, bloqueos: [{ id: 'texto', etiqueta: 'Texto', contenido: '<div data-gjs-type="text">Inserta tu texto aquí</div>', }] }; }

private getDeviceManagerConfig() { return { Dispositivos: [ { nombre: 'Escritorio', Ancho: '' }, { nombre: 'Tablet', Ancho: '768px', widthMedia: '992px' }, { nombre: 'Mobile', Ancho: '320px', widthMedia: '480px' } ] } }

private getStyleManagerConfig() { return { appendTo: this.grapejsStyleContainer.nativeElement, Sectores: [ { nombre: 'General', abierto: falso, buildProps: [ 'flotar', 'exhibición', 'posición', 'top', 'Correcto', 'izquierda', 'Bottom' ] }, { nombre: 'Flex', abierto: falso, buildProps: [ 'dirección flexible', 'flex-wrap', 'justificar-contenido', 'ítems-alineados', 'aline-contenido', 'orden', 'base flexible', 'flex-grow', 'flex-shrink', 'alinear-se' ] }, { nombre: 'Dimension', abierto: falso, buildProps: [ 'ancho', 'altura', 'ancho máximo', 'min-height', 'margen', 'acolchado' ] }, { nombre: 'Tipografía', abierto: falso, buildProps: [ 'familia de fuentes', 'tamaño de fuente', 'peso de fuente', 'espaciado entre letras', 'color', 'altura de línea', 'alineación de texto', 'Sombra de texto' ], Propiedades: [ { Propiedad: 'Alineación de texto', lista: [ {valor: 'izquierda', claseNombre: 'fa fa-aline-izquierda'}, {valor: 'center', claseNombre: 'fa fa-align-center'}, {valor: 'right', className: 'fa fa-align-right'}, {valor: 'justificar', nombreClase: 'fa fa-align-justify'} ] } ] }, { nombre: 'Decoraciones', abierto: falso, buildProps: [ 'radio de frontera-c', 'color de fondo', 'radio de frontera', 'frontera', 'sombra-caja', 'antecedentes' ] }, { nombre: 'Extra', abierto: falso, buildProps: ['transición', 'perspectiva', 'transformación'] } ] } }

MARK:- Órdenes private setRightPanelCommands() { Definir comandos this.editor.Commands.add('show-styles', { getRowEl(editor) { return editor.getContainer().closest('.editor-row'); }, getStyleEl(row) { return row.querySelector('.styles-container') },

run(editor, sendero) { const smEl = this.getStyleEl(this.getRowEl(editor)); smEl.style.display = ''; }, stop(editor, remitente) { const smEl = this.getStyleEl(this.getRowEl(editor)); smEl.style.display = 'ninguno'; }, }); this.editor.Commands.add('show-layers', { getRowEl(editor) { return editor.getContainer().closest('.editor-row'); }, getLayersEl(row) { return row.querySelector('.layers-container') },

run(editor, sendero) { const lmEl = this.getLayersEl(this.getRowEl(editor));

lmEl.style.display = ''; }, stop(editor, remitente) { const lmEl = this.getLayersEl(this.getRowEl(editor)); lmEl.style.display = 'ninguno'; }, });

this.editor.Commands.add('show-blocks', { getRowEl(editor) { return editor.getContainer().closest('.editor-row'); }, getBlocksEl(row) { return row.querySelector('.blocks-container') },

run(editor, sendero) { const bmEl = this.getBlocksEl(this.getRowEl(editor)); bmEl.style.display = ''; }, stop(editor, remitente) { const bmEl = this.getBlocksEl(this.getRowEl(editor)); bmEl.style.display = 'ninguno'; }, });

this.editor.Commands.add('mostrar-características', { getRowEl(editor) { return editor.getContainer().closest('.editor-row'); }, getTraitsEl(row) { return row.querySelector('.traits-container') },

run(editor, sendero) { const tmEl = this.getTraitsEl(this.getRowEl(editor)); tmEl.style.display = ''; }, stop(editor, remitente) { const tmEl = this.getTraitsEl(this.getRowEl(editor)); tmEl.style.display = 'ninguno'; }, });

const openBl = this.editor.Panels.getButton('panel-switcher', "show-blocks"); this.editor.on('load', () => openBl & & openBl.set('active', 1)); this.editor.on('component:selected', () => { console.log("componentSelected"); const openSmBtn = this.editor.Panels.getButton('panel-switcher', 'show-styles'); openSmBtn.set('active', 1); }); }

private setDeviceViewCommands() { cmds const = this.editor.Commands; cmds.add('set-mobile-view', { run: (editor, elemento) => { editor.setDevice('Móvil'); element.set('active', true); }, parada: (editor, elemento) => { console.log("Mobile Stopped"); element.set('active', false); } });

cmds.add('set-tablet-view', { run: (editor, elemento) => { editor.setDevice('Tablet'); element.set('active', true); }, parada: (editor, elemento) => { console.log("Mobile Stopped"); element.set('active', false); } });

cmds.add('set-desktop-view', { run: (editor, elemento) => { editor.setDevice('Escritorio'); element.set('active', true); }, parada: (editor, elemento) => { console.log("Mobile Stopped"); element.set('active', false); } }); }

// MARK:- Utils

private addComponents() { para (sea clave en componentes) { nuevos componentesclave; } }

Este asunto se ha cerrado automáticamente porque no ha recibido respuesta a nuestra solicitud de más información por parte del autor original. Con solo la información que actualmente hay en el asunto, no tenemos suficiente información para actuar. Por favor, contacta con nosotros si tienes o encuentras las respuestas que necesitamos para que podamos investigar más a fondo.