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

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).

Read More
Code    Character
Ā  Ā
ā  ā
Ē  Ē
ē  ē
Ī  Ī
ī  Ä«
Ō  Ō
ō  ō
Ū  Ū
ū  Å«
ʻ  Ê»

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

Related posts

Leave a Reply

3 comments

  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.

  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.

    enter image description here

    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.