Aloha Editor

Aloha Editor Guides

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

Guides Index ▸

Characterpicker Plugin

The Characterpicker Plugin allows you to insert special characters into your text. Position your cursor, click the icon and choose the character you’d like to insert from the overlay menu.

1 Functional Description

In order to insert a special character move the cursor to the desired position and open the “Insert” tab at the Aloha Editor. Now click on the characterpicker button and choose a special character from the table. To delete a special character just mark the special character and press backspace or delete.

1.1 Components

  • characterpicker – brings up the overlay to select a character

1.2 Configuration settings

The characterpicker will by default support the following characters:

& " ¢ € £ ¥ © ® ™ ‰ µ · • … ′
″ § ß ‹ › « » ‘ ’ “ ” ‚ „ <
> ≤ ≥ – — ¯ ‾ ¤ ¦ ¨ ¡ ¿ ˆ ˜ °
− ± ÷ ⁄ × ¹ ² ³ ¼ ½ ¾ ƒ ∫ ∑ ∞
√ ∼ ≅ ≈ ≠ ≡ ∈ ∉ ∋ ∏ ∧ ∨ ¬ ∩ ∪
∂ ∀ ∃ ∅ ∇ ∗ ∝ ∠ ´ ¸ ª º † ‡ À
Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï
Ð Ñ Ò Ó Ô Õ Ö Ø Œ Š Ù Ú Û Ü Ý
Ÿ Þ à á â ã ä å æ ç è é ê ë ì
í î ï ð ñ ò ó ô õ ö ø œ š ù ú
û ü ý þ ÿ Α Β Γ Δ Ε Ζ Η Θ Ι Κ
Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω α
β γ δ ε ζ η θ ι κ λ μ ν ξ ο π
ρ ς σ τ υ φ χ ψ ω ℵ ϖ ℜ ϑ ϒ ℘
ℑ ← ↑ → ↓ ↔ ↵ ⇐ ⇑ ⇒ ⇓ ⇔ ∴ ⊂ ⊃
⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅ ⌈ ⌉ ⌊ ⌋ 〈 〉 ◊ ♠
♣ ♥ ♦

In the overlay, the characters are displayed in the same font and style in which they would be shown in the text. If unicode characters are not implemented in the current font, they may seem broken. This depends on the fonts installed in the operating system and/or browser.

It is possible to configure the global character set and to configure character sets for specific editables (identified by jQuery selectors):


Aloha.settings = {
	plugins: {
		characterpicker: {
			// this is the global setting
			config: '&#38; &#34; &#162; &#8364;',
			editables: {
				// this will disable the characterpicker for the header
				'#header': '',
				// allow more characters for editables with class 'article'
				'.article': '&#38; &#34; &#162; &#8364; &#163; &#165;'
			}
		}
	}
}