Añadiendo filtro a StyleManager
Hola @shlomoko para que el filtro funcione correctamente mediante el tipo 'stack' tienes que añadir un tipo de gestor de estilos personalizado, porque, como ya has notado, tienes que lidiar con cosas dinámicas (por ejemplo, 'funciónNombre'). Desafortunadamente, aún no hemos documentado esa parte y el único ejemplo que...
Lee la respuesta completa abajo ↓Pregunta
Hola, Estoy intentando añadir una propiedad de filtro a Styles. El problema que tengo es que la propiedad exige 2 argumentos: 1. El tipo de filtro 2. La fuerza. Por ejemplo, filtro: desenfoque (10%). El problema que tengo es que al añadirlo al archivo CSS que obtengo: filtro: desenfoque 10%. Entiendo que debería usar property.functionName para solucionar esto, pero no consigo averiguar cómo (parece que no hay ejemplos de esto en las bibliotecas existentes).
El código que tengo es:
sm.addProperty('Extra', {
nombre: 'Filter',
Propiedad: 'filtro',
Tipo: 'stack',
Propiedades: [{
Propiedad: 'filter_type',
tipo: 'select',
Valores predeterminados: 'ninguno',
lista: [{ valor: 'ninguno' }, { valor: 'desenfoque'} ,{ valor: 'brillo'},{ valor: 'contraste'} ,{ valor: 'sombra de agua'} ,{ valor: 'escala de grises'} ,{ valor: 'tono-rotación'} ,{ valor: 'invertir'} ,{ valor: 'opacidad'} ,{ valor: 'saturar'} ,{ valor: 'sepia'} ,{ valor: 'sepia'} ,{ valor: 'url'}],
},{
Propiedad: 'filter_strength',
Tipo: 'Deslizador',
nombre: 'Strength',
Unidades: ['%'],
Valores predeterminados: 100,
Paso: 1,
máximo: 100,
min:0,
}],
NombreDefunción: () => {
}
});
Gracias
Respuestas (3)
Hola @shlomoko para que el filtro funcione correctamente mediante el tipo 'stack' tienes que añadir un tipo de gestor de estilos personalizado, porque, como ya has notado, tienes que lidiar con cosas dinámicas (por ejemplo, 'funciónNombre'). Desafortunadamente, aún no hemos documentado esa parte y el único ejemplo que tenemos es grapesjs-style-gradient. Extender la propiedad de la pila podría ser aún un poco más difícil (probablemente también requerirá alguna mejora en la API actual), así que intentaré dar un ejemplo de este caso.
Hola @shlomoko he creado un plugin con el tipo de filtro de entrada https://github.com/artf/grapesjs-style-filter Puedes usarlo con la última versión https://github.com/artf/grapesjs/releases/tag/v0.14.40
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 #1897
[Pregunta] vista vs código
Hola... ¡Y perdón por mi inglés! Antes que nada, enhorabuena por este marco. Estoy intentando usar GrapeJS para crear mi propio editor de W...
Issue #1781
Añadir un prop de tipo tamaño fuente
Estoy intentando crear una propiedad tipo tamaño de fuente que me gustaría añadir al sector de dimensiones. Haciendo esto: Obteniendo el va...
Issue #1072
No se puede añadir una nueva regla CSS si un elemento que la está usando no está presente en el html
Hola, estoy usando la última versión y tengo el problema tal y como se describe en el título. Estoy editando html y css por separado. He no...
Issue #1588
[PREGUNTA]
¡Hola a todos y gracias por vuestro magnífico trabajo y por esta API! Tengo una pregunta sobre la caja, que envuelve todos los componentes...
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 →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.