Aloha Editor

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

Guides Index ▸

Link Plugin

The Link Plugin allows you to add hyperlinks to your document, either by specifying them manually or by selecting from repositories using autocompletion.

1 Functional Description

To create a new link, click on the link button. If a text is already entered you have to mark the desired word(s) and click on the link button. Now you can enter a URL of another website, or enter a name of an existing page in your repository. On the Aloha Editor Sidebar you can enter a name for the link and decide in which target the link should be opened. In order to delete a link just click at the linked text and deactivat the link button from the “Format” tab or click on the remove link button on the “Link” tab.

2 Components

  • formatLink – will format a given selection as a link by wrapping it in an <a> tag. If the selection is collapsed createLink will be executed
  • createLink – will insert a new link tag with an empty href into the dom at the current cursor position
  • editLink – allows you to edit an existing link
  • unlink – removes an existing link by unwrapping

3 Configuration


Aloha.plugins.link: {
	// all elements with no specific configuration may insert links
	config : [ 'a' ],
	editables : {
	// No links in the title.
	'#top-text'	: [  ]
	},
	// all links that match the targetregex will get set the target
	// e.g. ^(?!.*aloha-editor.com).* matches all href except aloha-editor.com
	targetregex : '^(?!.*aloha-editor.com).*',
	// this target is set when either targetregex matches or not set
	// e.g. _blank opens all links in new window
	target : '_blank',
	// the same for css class as for target
	cssclassregex : '^(?!.*aloha-editor.com).*',
	cssclass : 'aloha',
	// use all resources of type website for autosuggest
	objectTypeFilter: [ 'website' ],
	// handle change of href
	onHrefChange: function( obj, href, item ) {
		var jQuery = Aloha.require('jquery');
		if ( item ) {
			jQuery(obj).attr('data-name', item.name);
		} else {
			jQuery(obj).removeAttr('data-name');
		}
	}
};