Aloha Editor

Aloha Editor Guides

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

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 Events

When a link is removed, the link plugin will publish the event ‘aloha.link.remove’ with PubSub:


define(['PubSub'], function (PubSub) {
    PubSub.sub('aloha.link.remove', function (eventArgument) {
    	// eventArgument.range defines the selection when the link was removed
    	// eventArgument.text contains the link text
    });
});

4 Configuration


Aloha.settings.plugins.link = {

	// all elements with no specific configuration may insert links
	config: ["a"],

	editables: {
		// No links in the title.
		"#top-text": []
	},

	// Test if the link's href value denotes an external link.
	// eg: "ftp://www.example.com" or "//www.example.com"
	titleregex: "^([^:]+:)?\/\/",

	// The value to set the link's title attribute field to if the link's href
	// value matchs `titleregex`.
	title: "External link",

	// 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");
		}
	},

	// Add additional properties of the link target to the sidebar (if the link
	// target is fetched from a repository)
	sidebar: [
		{
			"attr": "path",
			"title": {
				"en": "Path",
				"de": "Pfad"
			}
		}
	],

	// Adds an anchor button and an additional text field to the ui for editing the link anchor.
	// This enables users to set anchors to pages from the repository.
	anchorLinks: true
};