Aloha Editor Plugins
Plugins are optional components of Aloha Editor.
Aloha Editor exists of the core which is dealing with the editable and the different browser browser implementations of the contentEditable element and generated HTML code.
Almost all other functionality is designed to be implemented as Aloha Editor Plugin.
Each plugin will provide you with components (buttons, input fields, … ) that can be added to the toolbar or sidebar, provides an API for other plugins or hooks into the AE core API.
After reading this guide, you will
- how to load and configure plugins
- know which plugins are available and which functionality they provide
1 Load Plugins
To load a plugin, it must be listed in the data-aloha-plugins
attribute of the Aloha Editor script tag. For example, to load the format and link plugin the script tag would look like the following
<script src="javascripts/aloha/aloha.js" data-aloha-plugins="common/format, common/link"></script>
2 Configure Plugins
To change the configuration parameters of plugins you can use the Aloha.settings.plugins
option. All possible settings are listed on the Guides page for each plugin.
The common pattern for configuring plugins is that there is a config key for global configuration and an editables key for configuration specific to editables. The editables key holds an object which contains a jquery selector to identify individual editable as the key and the corresponding configuration as it’s value. Usually plugins will expect the names of their buttons as configuration settings as best practice, but the available options may vary.
If multiple selectors apply for an editable only configuration of the last one is taken into account.
<script type="text/javascript"> Aloha.settings = { plugins: { format: { // all elements with no specific configuration get this configuration config: [ 'b', 'i', 'sub', 'sup', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ], editables: { // no formatting allowed for title '#title': [], // just bold and italic for the teaser '#teaser': [ 'b', 'i' ] } } } } </script>
3 Available Plugins
Plugins in the common
directory:
- common/abbr – the Abbr plugin provides an interface to wrap content with a
<abbr>
element. - common/align – the Align plugin provides an interface to align contents left, right, center, or justify the flow of text.
- common/block – Blocks are non-editable areas of a website, which often have some properties being editable through the Aloha user interface.
- common/characterpicker – the Character Picker plugin provides an interface to insert special characters.
- common/commands – the Commands plugin provides the inserthtml command for use with the paste plugin.
- common/contenthandler – the Content Handler plugin allows automatic processing of HTML inserted into an editable.
- common/dom-to-xhtml – the DOM to XHTML plugin provides support for editable.getContents() XHTML serialization.
- common/format – the Format plugin provides basic formatting choices for your content.
- common/highlighteditables – the Highlight Editables plugin provides a visual hint of where editables are in the page.
- common/horizontalruler – the Horizontalruler plugin provides an interface to insert a horizontal ruler element.
- common/image – the Image plugin provides an interface to add and manipulate images.
- common/link – the Link Plugin allows you to add hyperlinks to your document, either by specifying them manually or by selecting from repositories using autocompletion.
- common/list – the List plugin provides an interface to format or insert ordered and unordered lists.
- common/paste – the Paste plugin provides the means to process content pasted from the clipboard.
- common/table – the Table plugin provides specialized controls for table insertion and manipulation.
- common/undo – the Undo plugin replaces the native browser undo and redo functionality.
Plugins in the extra
directory:
- extra/attributes -
- extra/browser – provides a browser for the Repository API to insert links or images
- extra/cite – provides the possibility to add references to content quoted from another source
- extra/comments – add inline comments which are stored in the DOM
- extra/draganddropfiles – use Drag and Drop to upload files
- extra/flag-icons – this plugin is used by other plugins (wai-lang / metaview) and provides country and language icons
- extra/formatlesspaste – the formatless paste plugin can be used to strip HTML tags from pasted content
- extra/googletranslate – translate content with Google Translate
- extra/headerids – insert jump labels for internal hyperlinks
- extra/hints – (old plugin)
- extra/linkbrowser – a browser for the link plugin
- extra/linkchecker – (old plugin)
- extra/listenforcer – allow just one top-level list in an editable
- extra/metaview – the Meta View Plugin is used to visualize HTML elements for the editor
- extra/numerated-headers – with this plugin the editor has the possibility to auto generate numeration in the heading tags
- extra/profiler -
- extra/ribbon – this plugin is intended to provide a Ribbon which is displayed on top of the page and some controls can be added to it dynamically
- extra/sourceview – view the source of an editable including selection marks in the sidebar
- extra/speak – integrates speak.js into Aloha Editor
- extra/toc – add a table of contents into your editable
- extra/vie – integrates VIE.js into Aloha Editor
- extra/wai-lang – annotate parts of the content with
lang
attributes - extra/zemanta – integrates Zemanta into Aloha Editor
Community Plugins:
- colorselector – add font color or background color