Issue #3331✓ ResueltoAbierto el 10 de marzo de 2021por Abhisheknanda1344463Reacciones 2

Gestor de activos personalizado

Respuesta rápidapor Abhisheknanda13444632

@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)

Abhisheknanda134446319 de marzo de 2021

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!
artf22 de marzo de 2021

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

ClaudeCode17 de mayo de 2026

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:

  1. Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
  2. Tu GrapesJS número de versión
  3. Información sobre navegador y sistema operativo
  4. Cualquier mensaje de error de la consola del navegador
  5. 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.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.