Propiedades CSS activadas en id elements no guardadas v0.14.50

Cuando intento poner color de fondo en un elemento de fila de '1 columna', está en línea en el editor y no se asigna con id, tiene un id único, y cuando guardo el 'HTML' y los estilos 'json' y lo renderizo de nuevo, tampoco se guarda y el 'HTML' final, si abro la opción Export, está ahí en 'CSS' vinculado con id, pero de alguna manera los estilos 'json' no lo tienen, ya que vuelvo a poner 'HTML' y los estilos 'json' en el editor cuando lo obtengo desde la base de datos.

Intenté reproducir el problema en la página de demostración, pero ahí, cada vez que pongo una propiedad en un elemento id, ya está vinculada a id y, incluso al actualizar, persiste.

Esta es mi configuración

'''js var geditor = grapesjs.init({

Altura: '720px', Ancho: '1280px', contenedor: '#gjs', fromElement: 1, Offsets: 1, assetManager: { embedAsBase64: 1, Activos: '' }, styleManager: { clearProperties: 1 }, Plugins: [ 'gjs-preset-webpage', 'uvas-lory-slider', 'uvas-tabs', 'grapesjs-custom-code', 'toca uvas', 'grapesjs-parser-postcss', ], pluginsOpts: { 'grapesjs-lory-slider': { sliderBlock: { categoría: 'Extra' } }, 'grapesjs-tabs': { tabsBlock: { categoría: 'Extra' } }, 'gjs-preset-webpage': { modalImportTitle: 'Import Template', modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Pega aquí tu HTML/CSS y haz clic en Importar</div>', modalImportContent: function(editor) { return editor.getHtml() + '<style>'+editor.getCss()+'</style>' }, filestackOpts: null, //{ clave: 'AYmqZc2e8RLGLE7TGkX3Hz' }, aviaryOpts: falso, blocksBasicOpts: { flexGrid: 1 }, customStyleManager: [{ nombre: 'General', buildProps: ['flotar', 'mostrar', 'posición', 'arriba', 'derecha', 'izquierda', 'abajo'], Propiedades:[{ nombre: 'Alignment', propiedad: 'flotar', Tipo: 'Radio', Valores predeterminados: 'ninguno', lista: [ { valor: 'ninguno', claseNombre: 'fa fa-times'}, { valor: 'left', className: 'fa fa-align-left'}, { valor: 'right', className: 'fa fa-align-right'} ], }, { propiedad: 'posición', tipo: 'select'} ], },{ nombre: 'Dimension', abierto: falso, buildProps: ['ancho', 'ancho flexible', 'altura', 'ancho máximo', 'altura mínima', 'margen', 'acolchado'], Propiedades: [{ id: 'flexibilidad-anchura', tipo: 'entero', nombre: 'Ancho', Unidades: ['PX', '%'], Propiedad: 'Base flexible', Requerir: 1, },{ Propiedad: 'Margen', Propiedades:[ { nombre: 'Top', propiedad: 'margen-top'}, { nombre: 'Derecha', propiedad: 'margen-derecha'}, { nombre: 'Bottom', propiedad: 'margen-bottom'}, { nombre: 'Izquierda', propiedad: 'margen-izquierda'} ], },{ Propiedad: 'acolchado', Propiedades:[ { nombre: 'Top', propiedad: 'tapping-top'}, { nombre: 'Right', propiedad: 'padding-right'}, { nombre: 'Bottom', propiedad: 'tapding-bottom'}, { nombre: 'Izquierda', propiedad: 'acolchado-izquierda'} ], }], },{ nombre: 'Tipografía', abierto: falso, buildProps: ['familia-fuente', 'tamaño-fuente', 'peso-fuente', 'espaciado entre letras', 'color', 'altura de línea', 'alineación-texto', 'decoración-texto', 'sombra-texto'], Propiedades:[ { nombre: 'Fuente', propiedad: 'familia de fuentes'}, { nombre: 'Weight', propiedad: 'font-weight'}, { nombre: 'Color de fuente', propiedad: 'color'}, { Propiedad: 'Alineación de texto', Tipo: 'Radio', valores por defecto: 'izquierda', lista: [ { valor : 'izquierda', nombre : 'Izquierda', claseNombre: 'fa fa-align-left'}, { valor : 'centro', nombre : 'centro', nombreClase: 'fa fa-align-center' }, { valor : 'derecha', nombre : 'Derecha', claseNombre: 'fa fa-align-right'}, { valor : 'justificar', nombre : 'Justificar', claseNombre: 'fa fa-align-justify'} ], },{ propiedad: 'decoración de texto', Tipo: 'Radio', Valores predeterminados: 'ninguno', lista: [ { valor: 'ninguno', nombre: 'Ninguno', claseNombre: 'fa fa-times'}, { valor: 'subrayado', nombre: 'subrayado', claseNombre: 'fa fa-subrayado' }, { valor: 'line-through', nombre: 'Line-through', className: 'fa fa-strikethrough'} ], },{ propiedad: 'sombra de texto', Propiedades: [ { nombre: 'posición X', propiedad: 'text-shadow-h'}, { nombre: 'Y posición', propiedad: 'text-shadow-v'}, { nombre: 'Desenfoque', propiedad: 'texto-sombra-desenfoque'}, { nombre: 'Color', propiedad: 'color-sombra-texto'} ], }], },{ nombre: 'Decoraciones', abierto: falso, buildProps: ['opacidad', 'color de fondo', 'radio de borde', 'borde', 'sombra de caja', 'fondo'], Propiedades: [{ Tipo: 'Deslizador', propiedad: 'opacidad', Valores por defecto: 1, escalón: 0,01, máximo: 1, min:0, },{ propiedad: 'radio de frontera', Propiedades : [ { nombre: 'Top', propiedad: 'borde-arriba-izquierda-radio'}, { nombre: 'Derecha', propiedad: 'frontera arriba-derecha-radio'}, { nombre: 'Bottom', propiedad: 'border-bottom-left-radius'}, { nombre: 'izquierda', propiedad: 'frontera-abajo-derecha-radio'} ], },{ propiedad: 'sombra de caja', Propiedades: [ { nombre: 'X posición', propiedad: 'caja-sombra-h'}, { nombre: 'Y posición', propiedad: 'box-shadow-v'}, { nombre: 'Blur', propiedad: 'box-shadow-blur'}, { nombre: 'Spread', propiedad: 'box-shadow-spread'}, { nombre: 'Color', propiedad: 'color-sombra-caja'}, { nombre: 'tipo sombra', propiedad: 'tipo sombra caja'} ], },{ propiedad: 'antecedentes', Propiedades: [ { nombre: 'Imagen', propiedad: 'imagen de fondo'}, { nombre: 'Repeat', propiedad: 'back-repeat'}, { nombre: 'Posición', propiedad: 'posición-fondo'}, { nombre: 'Acceso', propiedad: 'anexo de fondo'}, { nombre: 'Tamaño', propiedad: 'tamaño de fondo'} ], },], },{ nombre: 'Extra', abierto: falso, buildProps: ['transición', 'perspectiva', 'transformación'], Propiedades: [{ Propiedad: 'transición', Propiedades:[ { nombre: 'Propiedad', propiedad: 'transición-propiedad'}, { nombre: 'Duración', propiedad: 'duración de transición'}, { nombre: 'Relax', propiedad: 'función-temporal de transición'} ], },{ Propiedad: 'transformar', Propiedades:[ { nombre: 'Rotar X', propiedad: 'transformar-rotar-x'}, { nombre: 'Rotate Y', propiedad: 'transform-rotate-y'}, { nombre: 'Rotar Z', propiedad: 'transformar-rotar-z'}, { nombre: 'Escala X', propiedad: 'transformar-escala-x'}, { nombre: 'Escala Y', propiedad: 'transform-scale-y'}, { nombre: 'Escala Z', propiedad: 'transform-escala-z'} ], }] },{ nombre: 'Flex', abierto: falso, Propiedades: [{ nombre: 'Flex Container', Propiedad: 'Display', tipo: 'select', valores predeterminados: 'bloquear', lista: [ { valor: 'bloquear', nombre: 'Desactivar'}, { valor: 'flex', nombre: 'Enable'} ], },{ nombre: 'Flex Parent', Propiedad: 'etiqueta-padre-flexión', tipo: 'entero', },{ nombre: 'Dirección', Propiedad: 'dirección flexible', Tipo: 'Radio', valores predeterminados: 'row', lista : [{ valor: 'fila', nombre: 'Row', Nombreclase: 'iconos-flex icono-dir-row', título: 'Row', },{ valor : 'invertido por fila', nombre: 'Reverso de fila', claseNombre: 'icons-flex icon-dir-row-rev', título: 'Reversa de fila', },{ valor: 'columna', nombre: 'Columna', título: 'Columna', claseNombre: 'icons-flex icon-dir-col', },{ valor : 'reverso de columna', nombre: 'reverso de columna', título: 'reverso de columna', Nombreclase: 'icons-flex icon-dir-col-rev', }], },{ nombre: 'Justificar', propiedad: 'justificar-contenido', Tipo: 'Radio', Valores predeterminados: 'Arranque Flexible', lista : [{ valor: 'flex-start', claseNombre: 'iconos-flexión icono-acaba-empezar', título: 'Start', },{ valor : 'flex-end', título: 'Fin', Nombre de clase: 'iconos-flexión icono-solo-terminar', },{ valor: 'espacio entre', título: 'Espacio entre', claseNombre: 'iconos-flex icono-solo-sp-apuesta', },{ valor : 'espacio-alrededor', título: 'Espacio alrededor', claseNombre: 'iconos-flexión icono-justo-sp-ar', },{ valor: 'centro', título: 'Centro', claseNombre: 'iconos-flexión icono-justo-sp-cent', }], },{ nombre: 'Align', propiedad: 'alinear-ítems', Tipo: 'Radio', valores predeterminados: 'centro', lista : [{ valor: 'flex-start', título: 'Start', Nombreclase: 'icons-flex icon-al-start', },{ valor : 'flex-end', título: 'Fin', claseNombre: 'icons-flex icon-al-end', },{ valor: 'estirarse', título: 'Stretch', Nombreclase: 'icons-flex icon-al-str', },{ valor: 'centro', título: 'Centro', Nombreclase: 'icons-flex icon-al-center', }], },{ nombre: 'Flex Children', Propiedad: 'etiqueta-padre-flexión', tipo: 'entero', },{ nombre: 'Orden', Propiedad: 'orden', tipo: 'entero', Valores predeterminados: 0, min: 0 },{ nombre: 'Flex', propiedad: 'flex', tipo: 'compuesto', Propiedades : [{ nombre: 'Crece', Propiedad: 'flex-grow', tipo: 'entero', Valores predeterminados: 0, min: 0 },{ nombre: 'Shrink', Propiedad: 'flex-shrink', tipo: 'entero', Valores predeterminados: 0, min: 0 },{ nombre: 'Base', Propiedad: 'Base flexible', tipo: 'entero', Unidades: ['px','%',''], Unidad: '', Valores predeterminados: 'Auto', }], },{ nombre: 'Align', Propiedad: 'Alinear-se', Tipo: 'Radio', Valores predeterminados: 'Auto', lista : [{ valor: 'auto', nombre: 'Auto', },{ valor: 'flex-start', título: 'Start', Nombreclase: 'icons-flex icon-al-start', },{ valor : 'flex-end', título: 'Fin', claseNombre: 'icons-flex icon-al-end', },{ valor: 'estirarse', título: 'Stretch', Nombreclase: 'icons-flex icon-al-str', },{ valor: 'centro', título: 'Centro', Nombreclase: 'icons-flex icon-al-center', }], }] } ], }, },

});

var pn = geditor. Paneles; var modal = geditor. modal; geditor. Commands.add('canvas-clear', function() { if(confirm('¿Seguro que vas a limpiar el lienzo?')) { var comps = geditor. DomComponents.clear(); setTimeout(function(){ localStorage.clear()}, 0) } });

Comando Add info var cmdm = geditor. Órdenes; var mdlClass = 'gjs-mdl-dialog-sm'; var infoContainer = document.getElementById('info-panel'); cmdm.add('open-info', function() { var mdlDialog = document.querySelector('.gjs-mdl-dialog'); mdlDialog.ClassName += ' ' + mdlClass; infoContainer.style.display = 'bloque'; modal.setTitle('Sobre esta demo'); modal.setContent(infoContainer); modal.open(); modal.getModel().once('change:open', function() { mdlDialog.ClassName = mdlDialog.className.replace(mdlClass, ''); }) }); pn.addButton('options', { id: 'open-info', claseNombre: 'fa fa-círculo-pregunta', comando: function() { geditor.runCommand('open-info') }, atributos: { 'título': 'Sobre', 'data-tooltip-pos': 'abajo', }, });

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) { if (msg.indexOf('[indefinido]') == -1) { toastr.warning (MSG); } origWarn (MSG); };

Añadir y embellecer las descripciones emergentes [['sw-visibility', 'Show Borders'], ['preview', 'Preview'], ['fullscreen', 'Fullscreen'], ['export-plantilla', 'Export'], ['deshacer', 'Deshacer'], ['rehacer', 'Rehacer'], ['gjs-open-import-webpage', 'Import'], ['clear-canvas', 'Clear canvas']] .forEach(function(item) { pn.getButton('options', item[0]).set('attributes', {title: item[1], 'data-tooltip-pos': 'bottom'}); }); [['open-sm', 'Style Manager'], ['open-layers', 'Layers'], ['open-blocks', 'Blocks']] .forEach(function(item) { pn.getButton('views', item[0]).set('attributes', {title: item[1], 'data-tooltip-pos': 'bottom'}); }); var titles = document.querySelectorAll('*[título]');

para (var i = 0; i < titles.length; i++) { var el = títulos[i]; var title = el.getAttribute('título'); título = título ? title.trim(): ''; if(!título) pausa; el.setAttribute('data-tooltip', título); el.setAttribute('título', ''); }

Mostrar bordes por defecto pn.getButton('opciones', 'sw-visibility').set('active', 1);

Eventos de almacenamiento y carga geditor.on('storage:load', function(e) { console.log('Load', e) }); geditor.on('storage:store', function(e) { console.log('Stored ', e) });

Haz cosas en carga geditor.on('load', function() { var $ = uvasjs.$;

Configuración de carga y visualización y gestor de estilos var openTmBtn = pn.getButton('views', 'open-tm'); openTmBtn & & openTmBtn.set('active', 1); var openSm = pn.getButton('vistas', 'open-sm'); openSm & & openSm.set('active', 1);

Añadir Sector de Configuración var traitsSector = $('<div class="gjs-sm-sector no-select">'+ '<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span> Settings</div>' + '<div class="gjs-sm-properties" style="display: none;"></div></div>'); var traitsProps = traitsSector.find('.gjs-sm-properties'); traitsProps.append($('.gjs-trt-traits')); $('.gjs-sm-sectores').antes(traitsSector); traitsSector.find('.gjs-sm-title').on('click', function(){ var traitStyle = traitsProps.get(0).style; var hidden = traitStyle.display == 'ninguno'; si (oculto) { traitStyle.display = 'bloqueo'; } else { traitStyle.display = 'ninguno'; } });

Gestor de bloques abiertos var openBlocksBtn = geditor. Panels.getButton ('vistas', 'bloques abiertos'); openBlocksBtn & & openBlocksBtn.set('active', 1); }); document.getElementById('form') .onsubmit = función (e) { var scriptTag = document.getElementById('gjs-styles-json') if (!scriptTag) { scriptTag = document.createElement('script') scriptTag.setAttribute('type', 'application/json') scriptTag.setAttribute('id', 'gjs-styles-json') scriptTag.setAttribute('readonly', true) scriptTag.setAttribute('hidden', true) } scriptTag.innerHTML = JSON.stringify(geditor.getStyle()) .trim() var gjsContent = document.getElementById('gjs-content') gjsContent.innerHTML = geditor.getHtml() .trim() + scriptTag.outerHTML Retorno verdadero }

var gjsContent = document.getElementById('gjs-content') gjsContent.setAttribute('hidden', true) var body = document.createElement('body') body.innerHTML = gjsContent.value.trim() geditor.setComponents(body.innerHTML) var styles = (body.getElementsByTagName('script')[0] && body.getElementsByTagName('script')[0] .innerHTML) || '{}' geditor.setStyle(JSON.parse(styles))

var images = {$images} var assetManager = geditor. AssetManager assetManager.add(imágenes)

Usé las configuraciones predeterminadas que encontré en la página de demostración.