javascript - How can I change the default font color palette in the TinyMce editor? - Stack Overflow

admin管理员组

文章数量:1341470

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

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

• javascript
• jquery
• html
• tinymce
• rte

Share Follow edited Mar 27, 2012 at 10:33 Thariama 50.9k1313 gold badges145145 silver badges175175 bronze badges asked Mar 26, 2012 at 14:13 cwdcwd 54.9k5555 gold badges171171 silver badges199199 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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.

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

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

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

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

本文标签： javascriptHow can I change the default font color palette in the TinyMce editorStack Overflow