Issue #2542✓ ResueltoAbierto el 1 de febrero de 2020por erikhawReacciones 3

Componente similar a una imagen con gestor de activos propio

Respuesta rápidapor artf3

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)

👍 Muy útilartf3 de febrero de 2020

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.

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 →

Explorar categorías de plugins

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