Cargar CSS externo en el editor

@micker debes incluirlos así:

    lienzo: {
        Estilos: ['bundle1.css', 'bundle2.css'],
        Guiones: ['bundle1.js', 'bundle2.js'],
    },

No veo el objeto ''lienzo'' en tu configuración. ¡Salud!

@micker si tu ''customCss'' es una URL, así es como la incluyes. Pero si tienes algunos estilos que quieres incluir a mano, aquí tienes el procedimiento:

editor.addComponents(
  `
     <style> div { Background: Teal} </style>
  `
)

¡Salud!

Intento usar https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates Pero no estoy seguro de esto... Si añado lienzo así '''var editor = grapesjs.init({

lienzo: { scripts: null, estilos: [personalizadosCss] //¿Hay alguna forma de hacerlo? }

avoidInlineStyle: false, dragMode: 'absoluto',

Indica dónde iniciar el editor en el editor. También puedes aprobar un HTMLElement Tamaño del editor Altura: '100%', contenedor: '#gjs_' + editor_sfx,

Usamos 'fromElement' o 'components' para obtener el HTML 'components' acepta una cadena HTML o una cadena JSON de componentes Aquí, primero, comprobamos y usamos componentes si ya están definidos de lo contrario, se usará la cadena HTML fromElement: 0, componentes: Landing Page.components || LandingPage.html,

Quizá queramos hacer la misma comprobación para los estilos estilo: Página de Aterrizaje.estilo || LandingPage.css, protegidoCss: '',

Offsets: 1,

assetManager: { embedAsBase64: 1, Recursos: Imágenes },

styleManager: { clearProperties: 1 },

Plugins: [ 'gjs-preset-webpage', 'uvas-lory-slider', 'uvas-tabs', 'grapesjs-custom-code', 'toca uvas', 'grapesjs-parser-postcss', 'grapesjs-tooltip', ],

pluginsOpts: { 'grapesjs-tooltip': { sliderBlock: { categoría: 'Extra' } }, 'grapesjs-lory-slider': { sliderBlock: { categoría: 'Extra' } }, 'uvas-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 Import</div>', modalImportContent: function(editor) { '<script>\n' + document.querySelector('#' + element_id + '_js').textContent.trim() + '\n</script>\n' return document.querySelector('#' + element_id + '_html').textContent.trim() + '\n' + '<style>\n' + document.querySelector('#' + element_id + '_css').textContent.trim() + '\n</style>\n'; },

filestackOpts: null, //{ clave: 'AYmqZc2e8RLGLE7TGkX3Hz' }, aviaryOpts: falso, blocksBasicOpts: { flexGrid: 1 }, customStyleManager: [{ nombre: 'General', buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'], Propiedades:[{ nombre: 'Alineación', Propiedad: 'flotar', Tipo: 'Radio', Defaults: 'ninguno', lista: [ { valor: 'no', 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', 'flex-width', 'altura', 'max-width', 'min-height', 'margen', 'acolchado'], Propiedades: [{ id: 'flexibilidad-ancho', tipo: 'entero', nombre: 'Ancho', Unidades: ['px', '%'], Propiedad: 'Base flexible', Requerir: 1, },{ Propiedad: 'Margen', Propiedades:[ { nombre: 'Top', propiedad: 'margin-top''}, { nombre: 'Right', propiedad: 'margin-right'}, { nombre: 'Bottom', propiedad: 'margin-bottom'}, { nombre: 'Izquierda', propiedad: 'margen-izquierda'} ], },{ Propiedad : ''Acolchado', Propiedades:[ { nombre: 'Top', propiedad: 'padding-top''}, { nombre: 'Right', propiedad: 'padding-right'}, { nombre: 'Bottom', propiedad: 'padding-bottom'}, { nombre: 'Izquierda', propiedad: 'acolchado-izquierda'} ], }], },{ nombre: 'Tipografía', abierto: falso, buildProps: ['familia-fuente', 'tamaño-tipo', 'peso-fuente', 'espaciado entre letras', 'color', 'altura-línea', 'alineación-texto', 'decoración-texto', 'sombra-texto'], Propiedades:[ { nombre: 'Fuente', propiedad: 'familia-fuente'}, { nombre: 'Weight', propiedad: 'font-weight'}, { nombre: 'Color de fuente', propiedad: 'color'}, { Propiedad: 'Alineación de texto', Tipo: 'Radio', Valores predeterminados: 'izquierda', lista: [ { valor : 'izquierda', nombre : 'Izquierda', claseNombre: 'fa fa-align-left'}, { valor : 'centro', nombre : 'centro', claseNombre: 'fa fa-align-center' }, { valor : 'derecha', nombre : 'Derecha', claseNombre: 'fa fa-align-right'}, { valor : 'justificar', nombre : 'Justificar', nombreClase: 'fa fa-aline-justificar'} ], },{ propiedad: 'decoración-texto', Tipo: 'Radio', Defaults: 'ninguno', lista: [ { valor: 'ninguno', nombre: 'Ninguno', claseNombre: 'fa fa-times'}, { valor: 'subrayado', nombre: 'subrayado', claseNombre: 'fa subrayado' }, { valor: 'línea-atravesante', nombre: 'Línea-atravesante', claseNombre: 'fa f-strikethrough'} ], },{ propiedad: 'sombra-texto', Propiedades: [ { nombre: 'X posición', propiedad: 'text-shadow-h'}, { nombre: 'Y posición', propiedad: 'text-shadow-v'}, { nombre: 'Blur', propiedad: 'text-shadow-blur''}, { nombre: 'Color'', propiedad: 'texto-sombra-color'} ], }], },{ nombre: 'Decoraciones', abierto: falso, buildProps: ['opacidad', 'color-fondo', radio de frontera', 'borde', sombra-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: 'border-top-left-radius'}, { nombre: 'Derecha', propiedad: 'frontera-arriba-derecha-radio'}, { nombre: 'Bottom', propiedad: 'border-bottom-left-radius'}, { nombre: 'Izquierda', propiedad: 'border-bottom-right-radius'} ], },{ propiedad: 'Sombra-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: 'caja-sombra-color'}, { nombre: 'Tipo sombra', propiedad: 'tipo-sombra caja''} ], },{ Propiedad: 'Antecedentes', Propiedades: [ { nombre: 'Imagen', propiedad: 'imagen-fondo'}, { nombre: 'Repeat', propiedad: 'back-repeat'}, { nombre: 'Posición', propiedad: 'posición-fondo''}, { nombre: 'Attachment', propiedad: 'background-attachment'}, { 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: 'propiedad-transición'}, { nombre: 'Duración', propiedad: 'duración-transición'}, { nombre: 'Easysing', propiedad: 'función-temporización-transición'} ], },{ Propiedad: 'Transformar', Propiedades:[ { nombre: 'Rotar X', propiedad: 'transformar-rotar-x'}, { nombre: 'Rota Y', propiedad: 'transforma-rotación-y'}, { nombre: 'Rotar Z', propiedad: 'transformar-rotar-z'}, { nombre: 'Scale X', propiedad: 'transform-scale-x'}, { nombre: 'Escala Y', propiedad: 'transform-escala-y'}, { nombre: 'Scale Z', propiedad: 'transform-scale-z'} ], }] },{ nombre: 'Flex', abierto: falso, Propiedades: [{ nombre: 'Flex Container', Propiedad: 'Exhibición', tipo: 'select', Valores predeterminados: ''bloquear', lista: [ { valor: 'bloque', nombre: 'Desactivar'}, { valor: 'flex', nombre: 'Enable'} ], },{ nombre: 'Flex Parent', Propiedad: 'Etiqueta-padre-flex', tipo: 'entero', },{ nombre : 'Dirección', propiedad : 'flex-direction', tipo: 'radio', valores predeterminados : 'row', lista : [{ valor: 'row', nombre: 'Row', Nombreclase: 'icons-flex icon-dir-row', título: 'Row', },{ valor : ''fila-invertida', nombre : 'Fila inversa', nombreclase: 'icons-flex icon-dir-row-rev', título: 'Fila inversa', },{ valor: 'columna', nombre : 'Columna', título: 'Columna', Nombrede de la clase: 'icons-flex icon-dir-col', },{ valor : 'reverso de columna', nombre : 'reverso de columna', título: 'reverso de columna', claseNombre: 'icons-flex icon-dir-col-rev', }], },{ nombre : 'Justificar', Propiedad : 'Justifica-Contenido', tipo: 'radio', Defaults : 'Arranque Flexible', lista : [{ valor : 'flex-start', Nombreclase: 'iconos-flex icono-acaba-empezar', título: 'Empieza', },{ valor: 'flex-end', título: 'Fin', Nombreclase: 'iconos-flexión-icono-solo-terminar', },{ valor: 'espacio-entre', título: 'Espacio entre', claseNombre: 'iconos-flex icono-simplemente-sp-apuesta', },{ valor : 'espacio-alrededor', título: 'Espacio alrededor', nombreclase: 'iconos-flex, icono-solo-sp-ar', },{ valor: 'centro', título: 'Center', Nombreclase: 'iconos-flexión-icono-solo-sp-centavo', }], },{ nombre : 'Align', Propiedad : 'Alinear-Ítems', tipo: 'radio', Defaults : 'Center', lista : [{ valor : 'flex-start', título: 'Empieza', Nombreclase: 'icons-flex icon-al-start', },{ valor: 'flex-end', título: 'Fin', nombreclase: 'icons-flex icon-al-end', },{ valor: 'estirar', título: 'Stretch', nombreclase: 'icons-flex icon-al-str', },{ valor: 'centro', título: 'Center', Nombreclase: 'icons-flex icon-al-center', }], },{ nombre: 'Flex Children', Propiedad: 'Etiqueta-padre-flex', tipo: 'entero', },{ nombre: 'Orden', propiedad: 'orden', tipo: 'entero', Valores predeterminados: 0, min: 0 },{ nombre : 'Flex', Propiedad : 'flex', Tipo: 'Compuesto', Propiedades : [{ nombre: 'Crecer', 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 por defecto: 'auto', }], },{ nombre : 'Align', propiedad : 'alinear-se', tipo: 'radio', Valores por defecto: 'auto', lista : [{ valor: 'auto', Nombre: 'Auto', },{ valor : 'flex-start', título: 'Empieza', Nombreclase: 'icons-flex icon-al-start', },{ valor: 'flex-end', título: 'Fin', nombreclase: 'icons-flex icon-al-end', },{ valor: 'estirar', título: 'Stretch', nombreclase: 'icons-flex icon-al-str', },{ valor: 'centro', título: 'Center', Nombreclase: 'icons-flex icon-al-center', }], }] } ], }, },

Desactiva el gestor de almacenamiento por el momento storageManager: { id: 'fc-gjs-' + editor_sfx, // Identificador prefijo que se usará dentro del almacenamiento y carga tipo: 'archivo-formulario', // Tipo de almacenamiento: local, remoto, ... personalizado: SimpleStorage

Tipo: 'A distancia', urlStore: 'http://localhost/endpoint_store', urlLoad: 'http://localhost/endpoint_load\',

pasos Antes de guardar: 1, storeComponents: true, // Activar/Desactivar el almacenamiento de componentes en formato JSON storeStyles: true, // Activar/Desactivar el almacenamiento de reglas en formato JSON storeHtml: true, // Activar/Desactivar el almacenamiento de componentes como cadena HTML storeCss: true, // Activar/Desactivar el almacenamiento de reglas como cadena CSS

params: {}, // Parámetros personalizados para pasar con la solicitud de almacenamiento remoto, por ejemplo, Token CSRF cabeceras: {}, // Cabeceras personalizadas para la solicitud de almacenamiento remoto autosave: true, // Si almacenar datos automáticamente autoload: true, // Si se deben auto-cargar los datos almacenados en init },

Administrador de bloques, define los bloques disponibles para arrastrar y soltar en el área de distribución /blockManager: { appendTo: '#gjs_' + editor_sfx + ' #blocks', Bloqueos: [] },/

Definimos un panel por defecto como una barra lateral para contener capas Paneles: { Valores predeterminados: [] //},

/** * El Selector Manager permite asignar clases y diferentes estados (por ejemplo: hover) en los componentes. * Generalmente, se usa junto con Style Manager, pero no es obligatorio */ /selectorManager: { appendTo: '#gjs_' + editor_sfx + ' .contenedor-estilos' },/

/estiloManager: { appendTo: '#gjs_' + editor_sfx + ' .contenedor-estilos' },/

/layerManager: { appendTo:'#gjs_' + editor_sfx + ' .layers-container' },/

/traitManager: { appendTo: '#gjs_' + editor_sfx + ' .contenedor-de rasgos', },/

Administrador de dispositivos: Escritorio, Tablet, Móvil mediaCondition: 'min-width', // por defecto es 'max-width' deviceManager: { dispositivos: [{ título: 'Móviles en modo retrato', nombre: 'Mobile Portrait', Altura: '568px', // Este valor se usará en el ancho del lienzo heightMedia: '768px', // este valor se usará en CSS @media Ancho: '320px', // Este valor se usará en el ancho del lienzo widthMedia: '480px', // este valor se usará en CSS @media }, { título: 'Móviles en modo paisaje', nombre: 'Paisaje Móvil', Altura: '320px', // Este valor se usará sobre la altura del lienzo heightMedia: '480px', // este valor se usará en CSS @media Ancho: '568px', // Este valor se usará en el ancho del lienzo widthMedia: '768px', // este valor se usará en CSS @media }, { título: 'Tabletas, (y móviles grandes en modo Paisajes)', nombre: 'Tablet', Ancho: '768px', // Este valor se usará en el ancho del lienzo widthMedia: '992px', // este valor se usará en CSS @media }, { nombre: 'Escritorio', Ancho: '', // Este valor se usará en el ancho del lienzo widthMedia: '', }] }, }); Tengo este error 'ErrorReferencia no capturada: fclayout_init_builder no está definida at HTMLSpanElement.onclick (index.php?option=com_modules&view=module&layout=edit&id=95:5782)''' Las costuras no enlazan ''lienzo: { scripts: null, estilos: [\'http://localhost/flexidev/templates/shaper_helix3/css/template.css\'] //¿Hay alguna forma de hacerlo? } y en la misma página '''var Landing Page = { html: "<h2>Esta es el área de diseño, puedes arrastrar y soltar para añadir tus bloques aquí, para cargar el campo flexicontent usa el panel de datos para insertar el bloque flexicontent</h2>". CSS: nulo, componentes: nulo, estilo: nulo, };```