Title: Fix for the Align Plugin
Last modified: August 20, 2016

---

# Fix for the Align Plugin

 *  Resolved [davidosullivan](https://wordpress.org/support/users/davidosullivan/)
 * (@davidosullivan)
 * [13 years, 2 months ago](https://wordpress.org/support/topic/fix-for-the-align-plugin/)
 * Hey there,
 * I have a fix for the align plugin in 2.3. This seems to be working for me but
   I am not offering any guarantees…:-
 *     ```
       /*
       * Aloha Align Plugin - Allow text alignment in Aloha Editor
       * Copyright (C) 2010 by Thomas Lété - http://twitter.com/taoma_k
       * Licensed unter the terms of LGPL http://www.gnu.org/copyleft/lesser.html
       *
       */
   
       define(
       ['aloha', 'aloha/plugin', 'aloha/floatingmenu', 'i18n!align/nls/i18n', 'i18n!aloha/nls/i18n', 'aloha/jquery', 'css!align/css/align.css'],
       function(Aloha, Plugin, FloatingMenu, i18n, i18nCore, jQuery) {
   
       	var
       		GENTICS = window.GENTICS;
   
       	/**
       	 * register the plugin with unique name
       	 */
       	 return Plugin.create('align', {
       		_constructor: function(){
       			this._super('align');
       		},
   
       		/**
       		 * Configure the available languages
       		 */
       		languages: ['en', 'fr'],
   
       		/**
       		 * Configuration (available align options)
       		 */
       		config: {
       			alignment: ['right','left','center','justify']
       		},
   
       		/**
       		 * Alignment wanted by the user
       		 */
       		alignment: '',
   
       		/**
       		 * Alignment of the selection before modification
       		 */
       		lastAlignment: '',
   
       		/**
       		 * Initialize the plugin and set initialize flag on true
       		 */
       		init: function () {
       			this.createButtons();
   
       			var that = this;
   
       			// apply specific configuration if an editable has been activated
       			Aloha.bind('aloha-editable-activated', function (e, params) {
       				that.applyButtonConfig(params.editable.obj);
       			});
   
       			// add the event handler for selection change
       		    Aloha.bind('aloha-selection-changed', function(event, rangeObject) {
       		    	if (Aloha.activeEditable) {
       		    		that.buttonPressed(rangeObject);
       		    	}
       		    });
       		},
   
       		buttonPressed: function (rangeObject) {
   
       			var that = this;
   
       			rangeObject.findMarkup(function() {
       		        that.alignment = jQuery(this).css('text-align');
       		    }, Aloha.activeEditable.obj);
       			if(this.alignment != this.lastAlignment)
       			{
       				this.alignRightButton.setPressed(false);
       				this.alignLeftButton.setPressed(false);
       				this.alignCenterButton.setPressed(false);
       				this.alignJustifyButton.setPressed(false);
   
       				switch(this.alignment)
       				{
       					case 'right':
       						this.alignRightButton.setPressed(true);
       						break;
   
       					case 'center':
       						this.alignCenterButton.setPressed(true);
       						break;
   
       					case 'justify':
       						this.alignJustifyButton.setPressed(true);
       						break;
   
       					default:
       						this.alignLeftButton.setPressed(true);
       						this.alignment  = 'left';
       						break;
       				}
       			}
   
       			this.lastAlignment = this.alignment;
       		},
   
       		/**
       		 * applys a configuration specific for an editable
       		 * buttons not available in this configuration are hidden
       		 * @param {Object} id of the activated editable
       		 * @return void
       		 */
       		applyButtonConfig: function (obj) {
   
       			var config = this.getEditableConfig(obj);
   
       			if ( config && config.alignment && !this.settings.alignment ) {
       				config = config;
       			} else if ( config[0] && config[0].alignment) {
       				config = config[0];
       			} else if ( this.settings.alignment ) {
       				config.alignment = this.settings.alignment;
       			}
   
       			if (typeof config.alignment === 'undefined') {
       				config = this.config;
       			}
   
       			if ( jQuery.inArray('right', config.alignment) != -1) {
       				this.alignRightButton.show();
       			} else {
       				this.alignRightButton.hide();
       			}
   
       			if ( jQuery.inArray('left', config.alignment) != -1) {
       				this.alignLeftButton.show();
       			} else {
       				this.alignLeftButton.hide();
       			}
   
       			if ( jQuery.inArray('center', config.alignment) != -1) {
       				this.alignCenterButton.show();
       			} else {
       				this.alignCenterButton.hide();
       			}
   
       			if ( jQuery.inArray('justify', config.alignment) != -1) {
       				this.alignJustifyButton.show();
       			} else {
       				this.alignJustifyButton.hide();
       			}
       		},
   
       		createButtons: function () {
       		    var that = this;
   
       		    // create a new button
       		    this.alignLeftButton = new Aloha.ui.Button({
       			  'name' : 'alignLeft',
       		      'iconClass' : 'aloha-button-align aloha-button-align-left',
       		      'size' : 'small',
       		      'onclick' : function () { that.align('left'); },
       		      'tooltip' : i18n.t('button.alignleft.tooltip'),
       		      'toggle' : true
       		    });
   
       		    // add it to the floating menu
       		    FloatingMenu.addButton(
       		      'Aloha.continuoustext',
       		      this.alignLeftButton,
       		      i18nCore.t('floatingmenu.tab.format'),
       		      1
       		    );
   
       		    // create a new button
       		    this.alignCenterButton = new Aloha.ui.Button({
       		      'name' : 'alignCenter',
       		      'iconClass' : 'aloha-button-align aloha-button-align-center',
       		      'size' : 'small',
       		      'onclick' : function () { that.align('center'); },
       		      'tooltip' : i18n.t('button.aligncenter.tooltip'),
       		      'toggle' : true
       		    });
   
       		    // add it to the floating menu
       		    FloatingMenu.addButton(
       		      'Aloha.continuoustext',
       		      this.alignCenterButton,
       		      i18nCore.t('floatingmenu.tab.format'),
       		      1
       		    );
   
       		    // create a new button
       		    this.alignRightButton = new Aloha.ui.Button({
       		      'name' : 'alignRight',
       		      'iconClass' : 'aloha-button-align aloha-button-align-right',
       		      'size' : 'small',
       		      'onclick' : function () { that.align('right'); },
       		      'tooltip' : i18n.t('button.alignright.tooltip'),
       		      'toggle' : true
       		    });
   
       		    // add it to the floating menu
       		    FloatingMenu.addButton(
       		      'Aloha.continuoustext',
       		      this.alignRightButton,
       		      i18nCore.t('floatingmenu.tab.format'),
       		      1
       		    );
   
       		    // create a new button
       		    this.alignJustifyButton = new Aloha.ui.Button({
       		      'name' : 'alignJustify',
       		      'iconClass' : 'aloha-button-align aloha-button-align-justify',
       		      'size' : 'small',
       		      'onclick' : function () { that.align('justify'); },
       		      'tooltip' : i18n.t('button.alignjustify.tooltip'),
       		      'toggle' : true
       		    });
   
       		    // add it to the floating menu
       		    FloatingMenu.addButton(
       		      'Aloha.continuoustext',
       		      this.alignJustifyButton,
       		      i18nCore.t('floatingmenu.tab.format'),
       		      1
       		    );
   
       		},
   
       		/**
       		 * Check whether inside a align tag
       		 * @param {GENTICS.Utils.RangeObject} range range where to insert the object (at start or end)
       		 * @return markup
       		 * @hide
       		 */
       		findAlignMarkup: function ( range ) {
   
       			var that = this;
   
       			if ( typeof range === 'undefined' ) {
       		        var range = Aloha.Selection.getRangeObject();
       		    }
       			if ( Aloha.activeEditable ) {
       				return range.findMarkup(function() {
       					return jQuery(this).css('text-align') == that.alignment;
       			    }, Aloha.activeEditable.obj);
       			} else {
       				return null;
       			}
       		},
   
       		/**
       		 * Align the selection or remove it
       		 */
       		align: function ( tempAlignment ) {
   
       			var range = Aloha.Selection.getRangeObject();
   
       			this.lastAlignment = this.alignment;
       			this.alignment = tempAlignment;
   
       		    if (Aloha.activeEditable) {
       		        if ( this.findAlignMarkup( range ) ) {
       		            this.removeAlign();
       		        } else {
       		        	this.insertAlign();
       		        }
       		    }
       		},
   
       		/**
       		 * Align the selection
       		 */
       		insertAlign: function () {
   
       			var that = this;
   
       			// do not align the range
       		    if ( this.findAlignMarkup( range ) ) {
       		        return;
       		    }
       		    // current selection or cursor position
       		    var range = Aloha.Selection.getRangeObject();
       			var rangeParent = range.getCommonAncestorContainer();
       			//basically the problem seems to be that its not selecting the block level element- so if h1 is bold, the b tag gets selected rather than the h1
       			if(!GENTICS.Utils.Dom.isBlockLevelElement( rangeParent ))
       				{
       				//this doesn't work with list elements
       				//range.update( range.splitObject ); // set the splitObject as new commonAncestorContainer and update the selectionTree
       				followUpContainer = jQuery( '<p></p>' );//get the object to apply align to by checking where a block level element could be inserted after- this returns the closest block level element to the selection/cursor location
       				insertAfterObject = Aloha.Markup.getInsertAfterObject( range, followUpContainer );
       				range.update( jQuery(insertAfterObject) );
       				rangeParent = range.getCommonAncestorContainer();
       				}
       		    if (!GENTICS.Utils.Dom.isEditingHost(rangeParent)) {
   
       				// if the parent node is not the main editable node and align
       				// OR iterates the whole selectionTree and align
       				that.toggleAlign( rangeParent );
   
       			}	else {
       				var alignableElements = [];
       				jQuery.each(Aloha.Selection.getRangeObject().getSelectionTree(), function () {
       					if (this.selection !== 'none' && this.domobj.nodeType !== 3) {
       						alignableElements.push( this.domobj );
       					}
       				});
       				that.toggleAlign( alignableElements );
       				console.log('gonna apply to alignableElements',alignableElements);
       			}
       			if(this.alignment != this.lastAlignment)
       			{
       				switch(this.lastAlignment)
       				{
       					case 'right':
       						this.alignRightButton.setPressed(false);
       						break;
   
       					case 'left':
       						this.alignLeftButton.setPressed(false);
       						break;
   
       					case 'center':
       						this.alignCenterButton.setPressed(false);
       						break;
   
       					case 'justify':
       						this.alignJustifyButton.setPressed(false);
       						break;
       				}
       			}
   
       		    // select the (possibly modified) range
       		    range.select();
       		},
       		toggleAlign: function ( domObj, property ) {
   
       			var that = this;
   
       			property = property || 'text-align';
   
       			var newAlignment = ( property === 'vertical-align' ) ? that.verticalAlignment : that.alignment;
   
       			var shouldRemoveAlignment = true;
   
       			jQuery( domObj ).each( function() {
   
       				var currentAlignment = jQuery( this ).css( property );
   
       				if ( currentAlignment != newAlignment ) {
       					shouldRemoveAlignment = false;
       					return false;
       				}
   
       			});
   
       			jQuery( domObj ).each( function() {
   
       				var currentAlignment = jQuery( this ).css( property );
   
       				if ( ( currentAlignment == newAlignment ) && shouldRemoveAlignment ) {
       					jQuery( this ).css( property, '' );
       				} else {
       					jQuery( this ).css( property, newAlignment );
       				}
   
       			});
   
       		},
   
       		/**
       		 * Remove the alignment
       		 */
       		removeAlign: function () {
   
       		    var range = Aloha.Selection.getRangeObject();
   
       		    if ( this.findAlignMarkup( range ) ) {
   
       		    	// Remove the alignment
       		    	range.findMarkup(function() {
       		            jQuery(this).css('text-align', '');
       		        }, Aloha.activeEditable.obj);
   
       		        // select the (possibly modified) range
       		        range.select();
       		    }
       		}
   
       	});
   
       });
       ```
   
 * just paste that over (plugins folder)/front-end-editor/lib/aloha-editor/plugins/
   common/align/lib/align-plugin.js
 * [http://wordpress.org/extend/plugins/front-end-editor/](http://wordpress.org/extend/plugins/front-end-editor/)

The topic ‘Fix for the Align Plugin’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/front-end-editor.svg)
 * [Front-end Editor](https://wordpress.org/plugins/front-end-editor/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/front-end-editor/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/front-end-editor/)
 * [Active Topics](https://wordpress.org/support/plugin/front-end-editor/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/front-end-editor/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/front-end-editor/reviews/)

## Tags

 * [align](https://wordpress.org/support/topic-tag/align/)

 * 0 replies
 * 1 participant
 * Last reply from: [davidosullivan](https://wordpress.org/support/users/davidosullivan/)
 * Last activity: [13 years, 2 months ago](https://wordpress.org/support/topic/fix-for-the-align-plugin/)
 * Status: resolved