Issue #2281💬 RespondidoAbierto el 19 de septiembre de 2019por AkibDeraiya123Reacciones 0

Cómo establecer la proporción personalizada por defecto para el recorte de imágenes mientras se abre el editor de imágenes

Respuesta rápidapor AkibDeraiya123

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)

AkibDeraiya12319 de septiembre de 2019

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.

artf25 de septiembre de 2019

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í

AkibDeraiya12325 de septiembre de 2019

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

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.