Componente similar a una imagen con gestor de activos propio
Solo tienes que crear tu propio comando que llame a tu modal. Obviamente, como implementas tu propio Gestor de Activos, depende de ti saber CUÁNDO actualizar el objetivo '''js editor. Commands.add('my-asset-manager', { run(editor, sender, opts) { editor. Modal.open({ Título: '...', Contenido: '...', }); Pseudocódigo p...
Lee la respuesta completa abajo ↓Pregunta
¡Hola a todos! Tengo una pregunta sobre mi problema, que quiero resolver durante aproximadamente un mes. La pregunta es: ¿Puedo crear un componente, como un componente de imagen, para que cuando lo suelte, abra mi propio gestor de activos, que no sobrescriba el gestor original de activos, así que el componente de imagen tendrá la misma funcionalidad que tiene ahora? Escribí modal simple, donde puedes buscar imágenes en línea, pero este modal sobrescribe el gestor original de activos:
const modal = editor. modal;
modal.open({
título: '<br>plugin Pixabay<br>',
Contenido: '
<div class="container">
<form id="search-form">
<tipo de entrada="texto" id="búsqueda-fotos">
</form>
<div id="forPhotos">
</div>
',</div>
});
Cuando suelto image block, aparece este modal en lugar del gestor original de assets, y ahora el segundo problema, quería sobrescribir el comando open-assets, que encontré aquí en el foro así:
window.editor.Commands.add("open-asset", {
run(editor, sender, opts) {
setTimeout(() => {
opts.target.set('src', 'https://via.placeholder.com/150');
}, 1);
}
});
Así que, cuando suelto un componente de imagen, realmente añade imagen a la página, pero cuando intento renombrar el comando a:
window.editor.Commands.add("mycommand", {
run(editor, sender, opts) {
setTimeout(() => {
opts.target.set('src', 'https://via.placeholder.com/150');
}, 1);
}
});
Y luego ejecutarlo, no funcionará, porque no sé qué significa ese parámetro en el método y no sé cómo llamarlo, pensé en algo así: 'window.editor.runCommand("mycommand", /* ¿Algunos parámetros? */);' Así que, por favor, ¿hay alguna forma de lograr que tenga mi propio comando, mi propio componente y modal, que se separen de los open-assets y del bloque Image y funcionen igual que un bloque de imagen? Luego la suelto, se abre modal, busco imagen, hago clic en esta imagen y luego aparece en la página. La funcionalidad modal y el componente de bloque ya están hechos, pero realmente no sé cómo separarlos y cómo llamarlos correctamente, que dejará la imagen directamente en la página.
Por último, perdón por mi inglés, todavía no estoy muy avanzado en él, pero espero que entiendas mi problema. Gracias por tu tiempo y tus sugerencias. Que tengas un buen día. E. H.
Respuestas (1)
Solo tienes que crear tu propio comando que llame a tu modal. Obviamente, como implementas tu propio Gestor de Activos, depende de ti saber CUÁNDO actualizar el objetivo
'''js editor. Commands.add('my-asset-manager', { run(editor, sender, opts) { editor. Modal.open({ Título: '...', Contenido: '...', }); Pseudocódigo para tu gestor de activos yourAssetManager.on('image.selected', (imgPath) => { objetivo const = editor.getSelected(); target.set('src', imgPath); }) } });
Para tu componente de imagen personalizada podrías hacer algo así:
'''js
editor. DomComponents.add('your-image', {
extender: 'imagen', // Extiende el componente original de imagen
Vista: {
onActive(ev) {
Evitar la propagación cuando la activación se desencadena por
Doble clic en el componente del lienzo
ev & ev.stopPropagation();
editor.runCommand ('mi-gestor-de activos');
},
}
})
Cuando añadas el bloque, asegúrate de usar la propiedad 'activar', esto activará el 'onActive' cuando se suelte en el lienzo
'''js editor. BlockManager.add('my-block-id', { etiqueta: 'Mi imagen', select: true, // Select the component una vez que se haya caído ACTIVAR: Cierto, Contenido: { Tipo: 'Tu-Imagen' } })
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2383
El componente personalizado no atrae el estilo en la primera adición.
Fiddle replicando el problema: https://jsfiddle.net/gd8mo3e4/1/ Tengo un componente personalizado para crear una galería de documentos pdf....
Issue #1966
[PREGUNTA] Bucle sobre todos los componentes
Hola a todos, Quiero crear un conector para cada botón que añada al lienzo. Esto está funcionando perfectamente. Sin embargo, cuando recarg...
Issue #2143
Pregunta: ¿Cómo puedo crear una imagen existente como enlace?
Tengo una plantilla existente que actualmente muestra la imagen en el centro de la página. Ahora, quiero que se pueda enlazar o hacer clic...
Issue #3346
¿Puedo desarrollar mi propio gestor de estilo y encuadernar las propiedades de forma cómoda?
Quiero crear mi propio gestor de estilos usando algún framework de interfaz como Element-UI para crear una interfaz de belleza rápidamente....
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.