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

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