How do you add custom color swatches to all WYSIWYG editors?

admin管理员组

文章数量:1322838

I would like to be able add the same custom colours to the swatches at bottom of colour picker panels that appear in the WYSIWYG editors across the site, to make it easier for clients to keep consistent in their styling.

The swatches I refer to are the bottom row in the screenshot.

I would like to do this without installing a plug-in, ideally.

I would like to be able add the same custom colours to the swatches at bottom of colour picker panels that appear in the WYSIWYG editors across the site, to make it easier for clients to keep consistent in their styling.

The swatches I refer to are the bottom row in the screenshot.

I would like to do this without installing a plug-in, ideally.

• wysiwyg
• color-picker

Share Improve this question asked Jul 28, 2016 at 10:59 Clayton JonesClayton Jones 27411 gold badge22 silver badges1313 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 19

Click on the Custom... text and the color picker will pop up. Pick the color of your choice and press OK. Chosen color will appear as a custom swatch for later use.

Note! The solution above is not a solution. See comments and edit below.

Edit:

Here is a function which replaces the entire default palette with custom swatches.

Note, there are 7 colors in the list instead 8. That's because there should be also the multiplication X (✕) at the end of the color list which removes any color applied to the text. So, when adding one more row there should be 15 colors, not 16.

function my_mce4_options($init) {

    $custom_colours = '
        "3366FF", "Color 1 name",
        "CCFFCC", "Color 2 name",
        "FFFF00", "Color 3 name",
        "99CC00", "Color 4 name",
        "FF0000", "Color 5 name",
        "FF99CC", "Color 6 name",
        "CCFFFF", "Color 7 name"
    ';

    // build colour grid default+custom colors
    $init['textcolor_map'] = '['.$custom_colours.']';

    // change the number of rows in the grid if the number of colors changes
    // 8 swatches per row
    $init['textcolor_rows'] = 1;

    return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

Also, you can build you own swatch grid depending on the color number and UI requrements:

$init['textcolor_rows'] = 4;
$init['textcolor_cols'] = 2;

Largely based on this WPSE answer.

For more information and customization see this blog post.

In addition to Max's answer, if you are looking to add to the existing pallet, here is the default colour pallet:

$custom_colours = '[
      "000000", "Black",
      "993300", "Burnt orange",
      "333300", "Dark olive",
      "003300", "Dark green",
      "003366", "Dark azure",
      "000080", "Navy Blue",
      "333399", "Indigo",
      "333333", "Very dark gray",
      "800000", "Maroon",
      "FF6600", "Orange",
      "808000", "Olive",
      "008000", "Green",
      "008080", "Teal",
      "0000FF", "Blue",
      "666699", "Grayish blue",
      "808080", "Gray",
      "FF0000", "Red",
      "FF9900", "Amber",
      "99CC00", "Yellow green",
      "339966", "Sea green",
      "33CCCC", "Turquoise",
      "3366FF", "Royal blue",
      "800080", "Purple",
      "999999", "Medium gray",
      "FF00FF", "Magenta",
      "FFCC00", "Gold",
      "FFFF00", "Yellow",
      "00FF00", "Lime",
      "00FFFF", "Aqua",
      "00CCFF", "Sky blue",
      "993366", "Red violet",
      "FFFFFF", "White",
      "FF99CC", "Pink",
      "FFCC99", "Peach",
      "FFFF99", "Light yellow",
      "CCFFCC", "Pale green",
      "CCFFFF", "Pale cyan",
      "99CCFF", "Light sky blue",
      "CC99FF", "Plum",
      ... CUSTOM HERE ...
    ]';

本文标签： How do you add custom color swatches to all WYSIWYG editors