Textbox.io offers rich and comprehensive functionality to work with images in content.
- Image editing - crop, resize/resample, rotate and flip
- Automatic image resizing
- Insert local images
- Insert images from the web
- Broad copy and paste support
- From the file system
- From Microsoft Word
- From image editing applications
- Drag and drop insertion
Image Editing
Image editing in Textbox.io enables users to crop, resize/resample, rotate and flip images within the editor.
Editing an image creates a new copy of the image which can be retained in the content as a data URL, or uploaded when the content is submitted or by calling the uploadImages function.
Editing Web Images
Editing images from the same domain as the editing page is supported without any changes.
Editing images from a server other than the current domain requires the deployment of the Textbox.io Server-side Components, specifically the Extended Image Editing proxy. This is due to the cross origin resource sharing (CORS) requirements of modern browsers. The Extended Image Editing proxy service ensures that images from a remote server can be edited within Textbox.io.
A local copy of the image is created for editing and the edited image is then retained as a data URI in the content or uploaded to a server based on your configuration.
Limiting Image Size
The size of inserted local images can be restricted when image editing is turned on. This enables developers to ensure image file sizes are more appropriate for their site.
Setting the preferredHeight and preferredWidth configuration options in the image configuration ensures that local images will be resized and resampled to ensure that they do not exceed the dimensions specified.
Working with Local Images and Edited Images
To enable end users and developers to work with content that contains local images (i.e. images from the end-user's machine) Textbox.io includes several options on how to store and manage images.
Developers can choose to turn off all functionality that relies on local images, store the images at data URIs within the content or upload images to a server using the uploading capabilities of Textbox.io.
For more information see the article on Handling Local Images.
Uploading Local Images
Textbox.io's image handling functionality includes methods to upload asynchronously via HTTP.
When image editing is turned on images are not uploaded while the document is being edited. This ensures that extraneous, partially edited images are not uploaded while editing is taking place.
When image editing is turned off local images are uploaded in the background as soon as they have been added to the document.
The article on Handling Local Images explains more about this process and how to handle asynchronous image uploads when saving content.