Format Plugin
The Format Plugin provides basic formatting choices for your content.
With the Format Plugin you are able to format paragraph formattings (p, h1, …) and other content formats like bold or subscript. You can also use Aloha Editor to annotate parts of your content as e.g. citation or code.
The following components are available:
1 Functional Description
The Format plugin allows you to format texts and headlines.
1.1 Paragraph, Headline, Preformatted or remove formatting
In order to enter normal text choose the paragraph layout at the Aloha Editor or select an entered text and choose the layout. In order to create a headline choose one of the headlines (h2 to h6) at Aloha Editor. Normal text will be wrapped into a <p> tag, headlines into e.g. a <h2> tag and preformatted text into a <pre> tag. You can change the layout each time or remove a formatting via clicking the remove formatting button at the Aloha Editor.
Removing a format will unwrap the contents from the corresponding formatting tag. If you want to ensure that contents are within paragraphs all the time, use the common/autoparagraph plugin. Removing a format will also trigger a smart-content-changed event.
1.1.1 Heading Hierarchy Check
If enabled in the configuration, the hierarchy of headings will be checked and a class “aloha-heading-hierarchy-violated” will be added, if the hierarchy is violated. The highlighting itself must be implemented in the css code. If a heading is violating the hierarchy, then the following heading will be checked against the last correct heading. The hierarchy is violated, if a heading is more than one hierarchy lower than the previous heading.
It is also checked, if the hierarchy is higher than the highest hierarchy found in the plugin configuration. The purpose of this is to tell the editor, that a ‘h1’ should not be used in this editable.
For example: if the plugin configuration config: [] contains the possible headings: 'h2', 'h3', 'h4', 'h5', 'h6', then all occurences of <h1> will be marked like this: <h1 class='aloha-heading-hierarchy-violated'>.
This feature is turned on with 'checkHeadingHierarchy: true' in the format plugin configuration.
1.1.2 Remove formatting in lists
If you remove formatting on unordered-, ordered- or definition lists and your selection doesn’t span more than one individual list, list items will be taken out of the list. If only part of one list item is selected, then the item won’t be taken out of the list. In that case only the text formats will be removed.
1.1.3 Tables
Tables won’t be deconstructed if you press “remove formatting” on them, only text formats will be removed.
1.2 Bold and Italic
Every text or headline can be formatted into bold or italic via selecting the text or headline and click on the bold or italic button at Aloha Editor. This wraps the selected text or headline into a <b> tag if bold or a <i> tag if italic. To undo this select the text or headline and click the button again.
1.3 Strong and Emphasize
Texts or headlines can be formatted into strong or emphasized texts or headlines via selecting the text or headline and click on the strong or emphasize button at the Aloha Editor. This wraps the selected text or headline into a <strong> tag if strong or <em> tag if emphasized. To undo this select the text or headline and click the button again.
1.4 Strikethrough
Texts or headlines can have strikethrough applied as well. Just selecting the text or headline and click on the strikethrough button at the Aloha Editor. This wraps the selected text or headline into a <del> tag. To undo this select the text or headline and click the button again.
1.5 Subscript and Superscript
In order to make subscript and superscript texts or headlines selecting the text or headline and click on the subscript or superscript button at the Aloha Editor. This wrap the selected text or headline into a <sub> tag if subscript or <sup> tag if superscript. To undo this select the text or headline and click the button again.
1.6 Code
Texts or headlines can a layout for codes via selecting the text or headline and click on the code button at Aloha Editor. This wraps the selected text or headline into a <code> tag. To undo this select the text or headline and click the button again.
1.7 Cite and quote
See cite plugin
2 Components
- code – format content as a code block
- emphasize – emphasize content
- strong (not def command) – put strong emphasis on content
- bold – format content bold
- italic – format content italic
- strikethrough – add strikethrough formatting
- subscript – add subscript formatting
- superscript – add superscript formatting
- underline – add underline formatting
- paragraph – will allow you to add paragraph formattings (address, dd, div, dt, h1, h2, h3, h4, h5, h6, p, pre)
3 Configuration
The format plugin provides the following config options:
Aloha.settings.plugins.format = {
// configure buttons available in the toolbar
// this example enables all buttons available
config : [ 'strong', 'em', 'b', 'i', 'del', 'sub', 'sup', 'p', 'h1', 'h2', 'h3',
'h4', 'h5', 'h6', 'pre', 'removeFormat'],
// specific configuration for each editable identified by css selectors
editables : {
// the editable with id "teaser" won't offer any formatting options
'#teaser' : [ ]
},
// those are the tags that will be cleaned when clicking "remove formatting"
// this example resembles the default configuration
removeFormats : [ 'u', 'strong', 'em', 'b', 'i', 'q', 'del', 's', 'code', 'sub',
'sup', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'quote', 'blockquote',
'section', 'article', 'aside', 'header', 'footer', 'address', 'main', 'hr', 'figure',
'figcaption', 'div', 'small', 'cite', 'dfn', 'abbr', 'data', 'time', 'var', 'samp',
'kbd', 'mark', 'span', 'wbr', 'ins' ],
// if set true, a class 'aloha-heading-hierarchy-violated' will be added
// to headings that violate the hierarchy, or headings, that are not contained
// in config
checkHeadingHierarchy: true
};
Chapters