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

by jb510   Last Updated May 18, 2018 23:08 PM

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



Answers 4


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.

mountaininja
mountaininja
October 24, 2012 19:12 PM

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/

Kitty Cooper
Kitty Cooper
July 29, 2013 23:29 PM

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.

j08691
j08691
July 01, 2016 13:51 PM

There is a free "Cards" font out there, but it may not work for web pages. It is the right way to go if what you are presenting will be printed: it offers heart (h) and diamond (d) symbols in outline - spade (s) and club (c) symbols are solid. I now use these in all my writing, both in MS Word and Bridge Composer. This is the correct way to do it for print (all black). People are willing to put up with (or appreciate) red hearts and diamonds on screen, but they look a little silly in print (whether red or gray).

I'd be interested to know if Wordpress could use the Cards font at all, and if it could be easy to use. Maybe print is not much of an issue for Wordpress, so it would not be worthwhile. (I'm just trying to decide whether or not to use Wordpress at all.)

Pete Matthews
Pete Matthews
May 18, 2018 23:00 PM

Related Questions


Add Item to Custom TinyMCE Menu

Updated July 07, 2015 16:03 PM



Disable text tab on WordPress text-editor

Updated November 12, 2017 13:08 PM