Gestor de activos personalizado
@artf Lo consiguieron y también manejamos insensibles a mayúsculas minúsculas https://user-images.githubusercontent.com/20657737/112457190-82d18980-8d81-11eb-895b-b5c42e849f3a.mov ¡Gracias! ❤️
Lee la respuesta completa abajo ↓Pregunta
Hola @artf
Seguí la documentación para crear un nuevo tipo de gestor de activos
Aquí (https://codepen.io/abhi_punk81/pen/MWbWzaq)
He creado un tipo nuevo como el mismo que aparece en la documentación
¿Cómo puedo abrir ese gestor de activos después de soltar mi bloque personalizado de iconos -: Al principio funciona bien, pero cuando suelto el bloque de imagen después de eso, aparece uno por defecto
¿Podrías guiarme? Estoy intentando crear un nuevo plugin para iconos uno
Después de encontrar los problemas que ya surgieron, tengo el comando add de esta forma y llamo a este commnd en el componente icono, y atascado cómo podría actualizar el objetivo al hacer doble clic-: '''js const cm = editor. Órdenes; cm.add('svg-icon', { run(editor, sender, opts) { const assettarget = opts.target; editor. Modal.open({ título: 'Seleccionar icono', contenido: '<div class="gjs-am-assets-cont"> <div class="gjs-am-assets-header" style="display: none;"> </div> <div class="gjs-am-assets gjs-am-assets--show" data-el="assets"><div class="gjs-am-asset gjs-am-svg-icon"> <div class="gjs-am-preview-cont">
<div class="gjs-am-preview-bg gjs-checker-bg"></div> <div class="gjs-am-icon" style="text-align: center; z-index: 1; position: relative; height: 100%"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.93 2.93A9.969 9.969 0 0 0 2 10c0 2.76 1.12 5.26 2.93 7.07l1.41-1.41A7.938 7.938 0 0 1 4 10c0-2.21.89-4.22 2.34-5.66L4.93 2.93m14.14 0l-1.41 1.41A7.955 7.955 0 0 1 20 10c0 2.95 22-.89 4.22-2.34 5.66l1.41 1.41A9.969 9.969 0 0 22 10c0-2.76-1.12-5.26-2.93-7.07M7.76 5.76A5.98 5.98 0 0 0 6 10c0 1.65.67 3.15 1.76 4.24l1.41-1.41A3.99 3.99 0 0 1 1 8 10c0-1.11.45-2.11 1.17-2.83L7.76 5.76m8.48 0l-1.41 1.41A3.99 3.99 0 0 1 16 10c0 1.11-.45 2.11-1.17 2.83L1.41 1.41A5.98 5.98 0 0 0 18 10c0-1.65-.67-3.15-1.76-4.24M12 8c-1.1 0-2 .9-2 2s.9 2 2 2-.9 2-2-2-2-2m-1 6v4h-1c-.55 0-1 .45-1 1H2v2h7c0 .55.45 1 1h4c.55 0 1-.45 1-1h7v-2h-7c0-.55-.45-1-1-1h-1v-4h-2z"></path></svg> </div> </div> <div class="gjs-am-meta"> <div class="gjs-am-name">Red de puntos de acceso</div> </div> ',</div> }); } }); ```Gracias
Respuestas (4)
@artf Lo consiguieron y también manejamos insensibles a mayúsculas minúsculas
¡Gracias! ❤️
Hola @artf de alguna manera he conseguido hacerlo En el componente activo llamé a esto -: '''js eventos: { dblclick: 'onActive' }, onActive () { editor. AssetManager.render(editor. AssetManager.getAll().filter(asset => asset.get('type') == 'svg-icon')); editor.runCommand("open-assets", { Objetivo: esto.modelo, }); },
Se abrirá mi gestor de activos y he añadido recursos para este gestor personalizado, como puedes ver en la captura de pantalla
<img width="1105" alt="Captura de pantalla 2021-03-20 a las 10 23 45 PM" src="https://user-images.githubusercontent.com/20657737/111877865-45f54380-89cb-11eb-8229-1848704320b7.png">
Ahora, mi pregunta es: ¿cómo podría conseguir la funcionalidad de búsqueda para filtrar los recursos?
¿Podrías guiarme @artf
¡Gracias!
Debería ser similar a lo que ya has hecho aquí 'Editor. AssetManager.render(editor. AssetManager.getAll().filter(asset => asset.get('type') == 'svg-icon'));' Así que busca assets buscando y actualízalo con render
Gracias por informar de esto, @Abhisheknanda1344463.
Gracias por compartir tu informe sobre Gestor de Activos Personalizado. Para ayudar al equipo a investigar y priorizar esto:
Por favor, proporciona:
- Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
- Tu GrapesJS número de versión
- Información sobre navegador y sistema operativo
- Cualquier mensaje de error de la consola del navegador
- Pasos para reproducir el problema
Lo que más ayuda:
- Ejemplo de código mínimo (no tu proyecto completo)
- Grabación de pantalla o captura de pantalla que muestra el problema
- Comportamiento esperado frente a comportamiento real claramente indicado
- Configuración GrapesJS que estás usando
Con estos detalles, los mantenedores pueden identificar y priorizar una solución mucho más rápido. El equipo de GrapesJS responde muy bien a los problemas bien documentados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #4455
'panel-dispositivos' y 'panel-switcher' en conflicto
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Versión de Chrome 103.0.5060.114 Enlace d...
Issue #3347
¿Cómo puedo conseguir código JS sin comprimir para editarlo?
Hola, gracias por revisar mi problema. Quiero usar mi propio JSEditor para editar html, css y js. Primero, uso 'getHtml', 'getCss', 'getJs'...
Issue #3392
HAZAÑA: Permitir una configuración dinámica droppable usando una función
Tengo un requisito que me permite usar selectores para determinar si un elemento es soltable. Por ejemplo: ! imagen El componente "hijo" de...
Issue #3170
Añadir nombre de clase a partir de rasgos
Hola, lo que intento conseguir es que el componente de texto se amplíe asignando un rasgo extra llamado Alineamiento y decidiendo a través...
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.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS vs Webflow vs Builder.io vs Puck: Which Visual Builder to Choose in 2026
A practitioner's 2026 comparison of GrapesJS, Webflow, Builder.io, and Puck — pricing, AI features, lock-in, and a one-line rule for picking the right one
Tutorial
GrapesJS vs Webflow vs Tilda (2026): Honest Comparison, Pricing & Which to Pick
GrapesJS vs Webflow vs Tilda compared head-to-head: real 2026 pricing, SEO features, code export, and which one actually fits your project
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.