Character Map plugin
Insert special characters into TinyMCE.
Contribute to this pageThis plugin adds a dialog to the editor with a map of special unicode characters, which cannot be added directly from the keyboard. The dialog can be invoked via a toolbar button - charmap
- or a dedicated menu item added as Insert > Special character
.
Basic setup
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'charmap',
toolbar: 'charmap',
menubar: 'insert'
});
Options
The default map of unicode characters can be overridden or extended through the options below.
Internally, character map is defined by the array of arrays, where each sub-array represents a single character. The first item in the sub-array is character code. The second is a title that shows up when mouse hovers over the specified character in the map. Character code can be either decimal, octal or hexadecimal (in the case of octal or hexadecimal format, code should be appropriately prefixed with 0 and 0x). Options are expected to be provided in the same format.
[
[160, 'no-break space'],
[173, 'soft hyphen'],
[34, 'quotation mark'],
...
[8205, 'zero width joiner'],
[8206, 'left-to-right mark'],
[8207, 'right-to-left mark']
];
charmap
With this option it is possible to fully override the default character map. This can be an array or a function that returns an array in the above mentioned format.
Type: Array
, Function
Example: Using charmap
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'charmap',
toolbar: 'charmap',
menubar: 'insert',
charmap: [
[0x2615, 'morning coffee']
]
});
charmap_append
This option provides a way to append some additional characters to the default character map. This can be array or a function that returns an array in the above mentioned format.
Type: Array
, Function
Example: Using charmap_append
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'charmap',
toolbar: 'charmap',
menubar: 'insert',
charmap_append: [
[0x2600, 'sun'],
[0x2601, 'cloud']
]
});
Toolbar buttons
The Character Map plugin provides the following toolbar buttons:
Toolbar button identifier | Description |
---|---|
charmap | Inserts custom characters into the editor. |
These toolbar buttons can be added to the editor using:
- The
toolbar
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
Menu items
The Character Map plugin provides the following menu items:
Menu item identifier | Default Menu Location | Description |
---|---|---|
charmap | Insert | Opens the charmap dialog. |
These menu items can be added to the editor using:
- The
menu
configuration option. - The
contextmenu
configuration option. - Custom Menu toolbar buttons.
Commands
The Character Map plugin provides the following JavaScript command.
Command | Description |
---|---|
mceShowCharmap | Opens the character map dialog. |
Example
tinymce.activeEditor.execCommand('mceShowCharmap');
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.