La edición de imágenes es una característica poderosa para cada editor Wysiwyg. Mejora significativamente las capacidades de una aplicación y deleita a los usuarios que desean hacer más con sus imágenes cargadas.

Hoy en día, los usuarios esperan que las aplicaciones tengan funciones de edición de imágenes, pero implementar tales características no es tan trivial como suena.

Por ejemplo, en algunos sistemas LMS, CMS y Administración de Documentos, los usuarios requieren edición de imágenes dentro de un editor WYSIWYG HTML.

Cargar imágenes y otros medios pueden ser una característica normal para los editores, pero la edición de imágenes generalmente no lo es. Es por eso que en este tutorial, le mostraré cómo puede implementar capacidades de edición de imágenes dentro de su editor. Exploraremos el recorte de imágenes, los filtros, la adición de textos y más.

Key Takeaways

• Use las transformaciones de imagen Filestack incorporadas de Froala para agregar fácilmente la edición de imágenes.

• Personalizar las opciones de Filestack para tener más control sobre las cargas y ediciones de imágenes.

• manejar eventos froala para realizar acciones siempre que el usuario interactúe con filestack.

• Configure el editor Wysiwyg en unos segundos y con algunas líneas.

• Guarde mucho tiempo integrando un editor con edición de imagen incorporada.

configurando el editor Wysiwyg

Antes de entrar en la edición de imágenes, primero necesitamos un editor Wysiwyg. Para hacer esto, incluya los archivos del editor Froala en su aplicación como desee (vamos con CDN en este). Y luego, inicializamos el editor dentro de un elemento div con la id “ froala-Editor: ”

    
    
    

    
    
    
    



    




On your JS file, add the following line of code:



new FroalaEditor('#froala-editor');




 Cuando ejecuta su aplicación web, debe ver la siguiente pantalla: 

  

 Una vez que ejecutemos nuestro editor, agregaremos funciones de edición de imágenes al habilitar el complemento Filestack integrado de forma nativa. Hacemos eso especificando opciones para el editor: 



new FroalaEditor('#froala-editor',{
    filestackOptions: {
        filestackAPI: 'YourFilestackAPIKey',
        uploadToFilestackOnly: true,
        pickerOptions: {
            accept: [
                '.pdf',
                'image/jpeg',
                'image/png',
                'image/*',
                'video/*',
                'audio/*'
            ],
            fromSources: [
                'local_file_system',
                'url',
                'facebook',
                'instagram'
            ]
        }
    },
    toolbarButtons: {
        'moreRich': {
            'buttons': ['openFilePickerImageOnly', 'openFilePickerVideoOnly', 'openFilePicker', 'insertLink', 'insertTable', 'emoticons', 'specialCharacters', 'insertHR'],
            'buttonsVisible': 3
        },
        'moreText': {
            'buttons': ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting']
        },
        'moreParagraph': {
            'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
        },
        'moreMisc': {
            'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],
            'align': 'right',
            'buttonsVisible': 2
        }
    },
    events: {
        'filestack.uploadedToFilestack': function (response) {
            console.log("Callback is triggered for upload to Filestack ",)
        },
        'filestack.filestackPickerOpened': function (response) {
            console.log("Callback is triggered for picker opened ",)
        },
        'filestack.filestackPickerClosed': function (response) {
            console.log("Callback is triggered for picker closed ",)
        },
        'filestack.uploadFailedToFilestack': function (response) {
            console.log(response);
        },
    },
    heightMin: 500,
    heightMax: 1000
});




 Aquí, declaramos algunas opciones para los botones de la barra de herramientas del editor, el tamaño, los eventos y las opciones adicionales para Filestack. En la propiedad  filestackOptions , declaramos nuestra clave de la API FILESTACK, un booleano que determina si los archivos se cargan exclusivamente en Filestack y algunas opciones de selección. Estas opciones determinan los tipos y fuentes de archivos permitidos. 

 y si aún no lo ha hecho, obtenga una clave API creando una cuenta de Filestack gratuita. Después de configurar Froala y Filestack, ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡.es ¡LIGRES! Ahora puede usar un editor avanzado de Wysiwyg con funciones de edición de imágenes dentro de su aplicación. Además, así es como debería aparecer el editor ahora: 

  

 Observe cómo el editor ahora tiene un mejor tamaño. Más importante aún, ahora tenemos botones con los íconos de Filestack en ellos. Estos botones permiten a los usuarios cargar imágenes, videos y otros archivos a través de FileStack. Ahora, para mostrarle algunas de las capacidades del complemento Filestack, vamos a sumergirnos en algunos casos de uso de edición de imágenes. 


  
  
   Use casos para la edición de imágenes dentro del editor Wysiwyg 



  
  
   recortar una imagen 


 Después de cargar una imagen, haga clic en ella, y un icono de Filestack debe aparecer a su lado. Haga clic en el icono para ingresar la vista de transformaciones de archivo. En la pestaña "Transformar", elija "Cortar" y ajuste la imagen a su gusto. Tenga en cuenta que puede recortar y rotar la imagen incluso antes de subirla. Subamos una imagen y la recolectemos luego usando transformaciones Filestack. 

  

 Así es como debe verse recortar una imagen usando FileStack. Podrá elegir entre las diferentes opciones de cultivo, incluidas la forma libre, el círculo, el cuadrado y 16: 9, que utilizamos aquí. Cuando haya terminado de recortar, haga clic en el botón Verificar y presione "Guardar". 


  
  
   Aplicando filtros 


 Los filtros se han convertido en una parte importante de cada aplicación que maneja imágenes. Con Filestack y Froala, puede lograr esto haciendo clic en el icono Filestack junto a una imagen cargada y yendo a la pestaña "Filtros". A partir de ahí, puede elegir entre muchos filtros de imagen, como Polaroid, Sepia, Grayscale y más. Ahora, apliquemos un filtro a nuestra imagen recortada. 

  


  
  
   Agregar y mejorar el texto 


 Ya sea para agregar títulos a los títulos de los capítulos o precios a productos o listados de bienes raíces, el texto es esencial para la edición de imágenes. Usando el editor de Froala, puede agregar texto con diferentes fuentes y estilo. Usando la imagen del anterior, agregemos algún texto y mejoremos. 

  


  
  
   insertando un borde 


 También podemos insertar fácilmente un borde o marco en nuestra imagen utilizando las características de transformación de Filestack. Vayamos a la pestaña "Border" y personalice un borde para nuestra imagen: 

  

 Después de hacer clic en "Guardar", deberíamos ver nuestra imagen mejorada en el editor. A partir de ahí, puede verificar la imagen cargada en su panel de control de Filestack. Vaya a "Browser de contenido" y verá nuestra imagen, que puede descargar por separado o en su aplicación. Como referencia, así es como la imagen debe cuidarse después de realizar todas estas operaciones: 

  


  
  
  Conclusión


 Para cualquier aplicación moderna, la edición de imágenes es una herramienta valiosa. Con herramientas como Froala, puede acelerar la implementación de un editor Wysiwyg que tiene excelentes capacidades de edición de imágenes. Dichas herramientas le permiten recortar, agregar textos y filtros, insertar bordes y aplicar superposiciones a sus imágenes. 

 siguiendo esta guía, ahora puede comenzar a implementar tales características sin demasiado esfuerzo. Ahora, está listo para ofrecer una experiencia de edición de imágenes suave y agradable que permite a los usuarios ajustar sus imágenes sin dejar el editor. 

   Este artículo se publicó inicialmente en     froala's Blog    .