How can I change the default font color palette in the TinyMce editor?

Question

I have some preset colors that I'd like to add which goes along with my website's theme. How can I change the default font color palette in TinyMce?

screenshot-with-shadow.png http://img407.imageshack.us/img407/4526/screenshotwithshadow.png

Caricature

Answer 1

A. The easy but dirty way is to edit the source code. Take the file tiny_mce.js and search for the string "000000,993300,333300," - this is the start of the color definition of the SplitButton. You may now edit the colors as you like. This will adjust the color setting for all ColorSplitButton instances.

B. An other way, not as dirty as to fiddle with the source code is to adjust the colors after editor initialization. You will need to add the setup parameter to your tinymce configuration (or put it inside one of your own tinymce plugins):

   setup : function(ed) {
      ed.onInit.add(function(ed) {

         $('.mceColorSplitMenu').find('#_mce_item_2').get(0).setAttribute('data-mce-color','#0202FF');
         $('.mceColorSplitMenu').find('#_mce_item_3').get(0).setAttribute('data-mce-color','#0203FF');
          ...
         $('.mceColorSplitMenu').find('#_mce_item_41').get(0).setAttribute('data-mce-color','#0241FF');
      });
   }

Be aware that you might want to change other attriubtes of the SplitButton as well (i.e. the title, background color,...)

C. The cleanest but time-consuming solution is to develop an own plugin using an own ColorSplitButton containing the colors of your choice in the setting for that control element (have a look at the tinymce developer version) there is a file called ColorSplitButton.js . Here is some code containing the color setting:

    ColorSplitButton : function(id, s, ed) {
        var t = this;

        t.parent(id, s, ed);

        /**
         * Settings object.
         *
         * @property settings
         * @type Object
         */
        t.settings = s = tinymce.extend({
            colors : '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,008000,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF',
            grid_width : 8,
            default_color : '#888888'
        }, t.settings);

Olney

Hmm, also maybe check this out: tinymce.com/wiki.php/Configuration:theme_advanced_text_colors - just found that – Caricature

Answer 2

Try using the 'textcolor_map' setting on your editor configuration?

tinymce.init({
  textcolor_map: [
    'D7C0D0', 'color1',
    'F7C7DB', 'color2',
  ]
})

I too was trying to find how to change the default font color palette in Tinymce. Mostly answers such as those above pointed to using one of the configuration properties based upon 'theme_advanced_'. However the 'advanced' theme isn't packaged with version 4 and the 'modern' theme that version 4 uses by default doesn't expose the same properties. A theme independent solution would be preferable anyway.

And lo! A quick look in the 'textcolor' plugin reveals that when the plugin is setting up its colormap it first looks to the aforementioned property on the editor's settings.

Butch

Answer 3

Well, it's a bit late but my solution would be:

1.Assuming that you're using 'textcolor' plugin, copy the 'textcolor' folder in 'plugins' directory and give it a new name (lets say 'mytextcolor'). That will be the name of your new plugin (mytextcolor)

2.in your 'mytextcolor' folder open plugin.min.js and on line 12 you'll find the default color palette. modify that with new color names and codes.

3.in your tinymce config rename the 'textcolor' in plugins parameters to 'mytextcolor'

Hope that helps

Fraud

Answer 4

theme_name_text_colors: "#hexhex, #hexhex, #hexhex"

Put that in the init() function and your color pallet will become custom. And you still get the more colors button.

Reference: https://www.youtube.com/watch?v=dySkwdZG9J0

Macdermot

How do you add a color name? When you hover over the color in the picker it displays the hex value and I'd rather show a color name. – Hexachlorophene