Textbox.io 2.x Documentation : editing

configuration

    ↳ images

        ↳ editing

Configures image editing in Textbox.io.

This option was introduced in Textbox.io release 2.0.0.

Property	Type	Default	Properties
enabled	Boolean	`true`	Enables or disables the image editing feature. When image editing is enabled inserted images are not uploaded until the editor.content.uploadImages() method is called. This is to ensure that editing images does not cause multiple uploads. Disable image editing to have inserted images upload immediately.
proxy	String		Allows editing images from a remote server using an Image Proxy. Specify the URL to your proxy here. The Textbox.io SDK comes with an Image Proxy service (for J2EE environments). For information on installing and configuring this service, please see the Server-Side Components article.
preferredWidth	Number		When specified, any large local images that are inserted will be scaled down to fit within this width.
preferredHeight	Number		When specified, any large local images that are inserted will be scaled down to fit within this height.

Examples

In this example, a simple configuration object is created that turns off image editing.

var config = {
	images : {
        editing : {
            enabled : false	
        }
	}
};
 
var editor = textboxio.replace('#targetId', config);

Proxy

In this example, a proxy is set to allow editing images from remote servers.

var config = {
	images : {
        editing : {
            proxy : "http://YOUR-DOMAIN/ephox-image-proxy/image
        }
	}
};
 
var editor = textboxio.replace('#targetId', config);

Restricting image size

When image editing is enabled local images above a certain resolution can be automatically scaled down to a preferred size. Aspect ratio is maintained; in the following example the editor is configured with both preferred width and height at 1000, which means:

A wide image at 2000x1000 will be resized to 1000x500
A tall image at 1000x2000 will be resized to 500x1000

var config = {
	images : {
        editing : {
            preferredWidth : 1000,
            preferredHeight : 1000
        }
	}
};

var editor = textboxio.replace('#targetId', config);