Cómo establecer la proporción personalizada por defecto para el recorte de imágenes mientras se abre el editor de imágenes
Hola @artf, Supongo que encontré algo útil para otros usuarios. Depuro el código desde el repositorio git de 'https://github.com/artf/grapesjs-tui-image-editor' y supongo que puedo lograr todas las funcionalidades anteriores y muchas más personalizaciones como 'Tui image editor (esta es la biblioteca principal que se...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf, Gracias por crear una biblioteca de código abierto tan útil.
@artf estoy trabajando en Open Image Editor mientras el usuario cambia la foto desde el modal 'Select Image'. Logré abrir 'editor de imágenes' mientras el usuario cerraba el modal 'select image', con la ayuda de este código.
var cmdm = editor. Órdenes;
editor.on("stop:open-assets", función () {
cmdm.run ('editor de imágenes tui');
});
Pero cuando se abra este modal quiero establecer por defecto la proporción de recorte personalizada en el editor, y esa proporción de recorte por defecto el usuario no puede cambiarla; tampoco puede usar otros editores de imágenes, otras opciones como voltear, enmascarar, texto, dibujar, filtrar, etc. Solo se pueden habilitar las opciones predeterminadas de proporción de recorte y rehacer, deshacer y reiniciar, otras opciones deben ser ocultar o desactivar.
¿Cómo puedo conseguir con este comando 'editor.commands.run('tui-image-editor');'?
Como estoy pensando, necesito pasar algún objeto de configuración a este comando anterior. Si es así, ¿podrías ayudarme con esas claves de configuración, que me pueden ser útiles?
O si no necesito pasar ese objeto de configuración al comando superior, ¿cuál será otra opción para conseguir esta funcionalidad?
Tu respuesta me será de gran ayuda.
Respuestas (3)
Hola @artf, Supongo que encontré algo útil para otros usuarios.
Depuro el código desde el repositorio git de 'https://github.com/artf/grapesjs-tui-image-editor' y supongo que puedo lograr todas las funcionalidades anteriores y muchas más personalizaciones como 'Tui image editor (esta es la biblioteca principal que se usa en grapejs-tui-image-editor)'.
Pero ahí no consigo entender cómo puedo reinicializar 'grapesjs-tui-image-editor.min.js'!
De hecho, si reinicializamos 'grapesjs-tui-image-editor.min.js' cuando se abre 'editor de imágenes', entonces el valor de la variable 'opts' cambiará si pasamos algo en el parámetro 'options' y luego, en base a eso, 'getEditorConfig' también se regenerará.
Así que, ahora, cuando el usuario llamará al comando inferior desde el editor, ''' editor.commands.run('tui-image-editor', 'Las opciones estarán aquí')''' De nuevo, 'opts' cambiará y la función 'getEditorConfig' devolverá la nueva configuración para la función inferior, ''' this.imageEditor = new constr(content.children[0], this.getEditorConfig()); ``` Y en base a eso, el siguiente editor de imágenes estará abierto según la nueva configuración.
Solo ayudadme a reinicializar el 'grapesjs-tui-image-editor.min.js' mientras se abre un nuevo editor de imágenes, puedo implementar el resto de todo y crear una solicitud de fusión para vosotros.
Espero que esto te ayude y también nos ayudes a ser más flexibles.
Como puedes ver aquí https://github.com/artf/grapesjs-tui-image-editor#options Hay una opción de 'configuración' disponible para el plugin que se llamará en cada inicialización por 'this.getEditorConfig()', así que simplemente coloca tus opciones ahí
@artf, ya lo he probado, tío, pero parece que no funciona.
En la función 'this.getEditorConfig()' no recibimos opciones de actualización.
También intento con log imprimir la configuración actualizada después de esta línea 'const config = { ... opts.config };', pero parece que config imprime el objeto de configuración inicial (Cuando inicializo editor en ese momento, lo que pasé es 'pluginsOpts' por 'grapesjs-tui-image-editor').
En fin, resolví este problema desde mi parte. Avísame si quieres que genere una solicitud de PR.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1748
Cómo evitar que los elementos arrastren dentro del editor
Hola @artf Lo estás haciendo muy bien con grapesjs y es extremadamente útil hacer que nuestra funcionalidad sea más fácil de usar. Gracias...
Issue #3381
Cambiar entre componentes da un error máximo de tamaño de pila de llamadas
Hola artf, me gustaría darte las gracias por crear una herramienta tan potente para crear CMS personalizados. Estoy implementando una funci...
Issue #2309
[PREGUNTA]-¿Hay alguna forma de añadir una lista ordenada alfabéticamente?
Hola, @artf gracias por crear esta biblioteca tan increíble. Es realmente útil. Lo estoy usando en Angular y he usado una lista de orden co...
Issue #1719
Evento mientras haces clic en la imagen desde el modal del recurso
Hola @artf, Espero que estés bien. Estoy trabajando en gestión de activos. Tengo un total de 5 imágenes como imagen predeterminada del gest...
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
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
Preset DevFuture 2.0 — New Update Released
Preset continues evolving as a clean, production-ready starting point for building visual editors powered by GrapesJS
Tutorial
How Much Can You Earn on GJS.Market in a Month?
Discover how DevFuture earns €2,000+ monthly on GJS.Market — and learn how you can start building and selling your own GrapesJS plugins.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.