Aloha Editor

These guides help you to make your content editable and to develop Aloha Editor.

The Image Plugin

The Image Plugin will allow for basic image manipulation right within your content:

  • resize (by dragging and entering values)
  • resizing with fixed aspect ratio
  • resetting the image to it’s initial state
  • Image cropping
  • Insert a Image
  • Support for dragging the image around
  • Support for changing the title, src and alt attributes
  • Support for resizing the image
  • Support for changing the image padding

You need a server side script like ImageMagick which will handle actual cropping for you.

1 Enable the image browser button

If you have configured or integrated a repository containing images, you can enable an image browser button in the floating menu image scope. I will help user to choose an image picked from the repository. To enable this feature, just add ‘extra/imagebrowser’ to the plugins list to be loaded.

1.1 Configuration settings

Activate the image plugin per editable:


	Aloha.settings.plugins.image: {
		config: [ 'img' ], // enable the plugin
		editables: {
			'#my-editable': [ ] // disable the plugin for the editable with ID my-editable
		}
	}

Instead of [ 'img' ] you can also use an object of with settings available for the image plugin.

All available configuration settings (not all are per individual editable):


Aloha.plugins.image = {
	'maxWidth': 1600,
	'minWidth': 3,
	'maxHeight': 1200,
	'minHeight': 3,
	// This setting will correct manually values that are out of bounds
	'autoCorrectManualInput': true,	 
	// This setting will define a fixed aspect ratio for all resize actions
	'fixedAspectRatio' : false, 
	// When enabled this setting will order the plugin to automatically resize images to given bounds
	'autoResize': false,
	//Image manipulation options - ONLY in default config section
	ui: {
		oneTab		: false, //Place all ui components within one tab
		insert      : true,
		reset 		: true,
		aspectRatioToggle: true, // Toggle button for the aspect ratio 
		align		: true,	// Menu elements to show/hide in menu
		resize		: true,	// Resize buttons
		meta		: true,
		margin		: true,
		crop		: true,
		resizable	: true,	// Resizable ui-drag image
		handles     : 'ne, se, sw, nw'   
	},
	
	/**
	 * Crop callback is triggered after the user clicked accept to accept his crop
	 * @param image jquery image object reference
	 * @param props cropping properties
	 */
	onCropped: function ($image, props) {
		Aloha.Log.info('Default onCropped invoked', $image, props);
	},
	
	/**
	 * Reset callback is triggered before the internal reset procedure is applied
	 * if this function returns true, then the reset has been handled by the callback
	 * which means that no other reset will be applied
	 * if false is returned the internal reset procedure will be applied
	 * @param image jquery image object reference
	 * @return true if a reset has been applied, false otherwise
	 */
	onReset: function ($image) {
		Aloha.Log.info('Default onReset invoked', $image);
		return false;
	},
	
	/**
	 * Example callback method which gets called while the resize process is beeing executed.
	 */
	onResize: function ($image) {
		Aloha.Log.info('Default onResize invoked', $image);
	},
	
	/**
	 * Resize callback is triggered after the internal resize procedure is applied.  
	 */
	onResized: function ($image) {
		Aloha.Log.info('Default onResized invoked', $image);
	}
};

1.2 Components

  • insertimage – a button that allows you to insert an image