How to customize the symbols that appear in the Visual Editor insert custom character

Question

The TinyMCE Editor has a great button in the kitchen sink to insert custom characters / symbols.

Is there a way to control what symbols show up in this pop-up? (Specifically I need some unique Hawaiian language characters 'okina and macrons).

Code    Character
Ā  Ā
ā  ā
Ē  Ē
ē  ē
Ī  Ī
ī  ī
Ō  Ō
ō  ō
Ū  Ū
ū  ū
ʻ  ʻ

Hawaiian Diacritical mark reference: http://manoa.hawaii.edu/site/hawaiian_language.html

Answer 1

This has to do with your character map for tinyMCE it's located inside:

wp-includes/js/tinymce/themes/advanced/js/charmap.js

Although I wouldn't recommend editing the WP-Core you could theoretically just add new characters there like so:

['Ī',     'Ī',  true,'I kahako'],
['Ō',     'Ō',  true,'O kahako'],

and so on...

However when you update Wordpress this will overwrite those changes. So it's not the best solution but it would work.

Answer 2

WordPress and TinyMCE both recently have been updated to allow you to modify the special characters (charmap) without having to hack the core. You can lookup the symbols you want from https://dev.w3.org/html5/html-author/charref and then either add the following code to your theme's functions.php or make a plugin:

add_filter( 'tiny_mce_before_init', 'tinymce_add_chars' );
function tinymce_add_chars( $settings ) {
    $new_chars = json_encode( array(
        array( '8224', 'Dagger' ),
        array( '8230', 'Horizontal ellipsis' ),
        array( '8539', '1/8 Fraction' ),
        array( '8730', 'Square Root' ),
        array( '8818', 'Less than or equivalent to' ),
        array( '8819', 'Greater than or equivalent to' ),
        array( '0963', 'Sigma' ),
        array( '0956', 'Mu' ),
    ) );
    $settings['charmap_append'] = $new_chars;
    return $settings;
}

This modification relies on the tiny_mce_before_init hook in WordPress and TinyMCE's charmap_append settings. When adding elements you add each symbol as an array where the first item is the HTML entity code and the second is the description.

You can see in the screenshot below that my symbols have been appended to the existing list of symbols.

It looks like it's possible to also override the default list of symbols by using TinyMCE's charmap setting and listing the symbols you want.

Answer 3

Its not that hard to write a plugin to replace something like !U !u !' with the Hawaiian characters. That way you can just type a bang in front of the letter while typing your post to get the character you want.

I did this for suit symbols for card playing sites and it works beautifully and was very easy to do. See http://bridgeteaching.com/2011/09/we-have-created-a-suit-symbol-plugin-for-wordpress/