I figured out the text colour. I'm sure the size is something similar.

In config/tinyMceConfig.config add the following to the commands node

      <command>
          <umbracoAlias>mceForeColor</umbracoAlias>
          <icon>images/editor/forecolor.gif</icon>
          <tinyMceCommand value="" userInterface="true" frontendCommand="forecolor">forecolor</tinyMceCommand>
          <priority>75</priority>
      </command>

Not sure what the umbracoAlias is used for but the rest is pretty straight forward. change the priority to change where the button shows in the toolbar (should be unique but haven't tested)

tinyMCE uses spans to change the colour and by default the config in umbraco disables styles in spans so you need to modify the <validElements> node. basically look for:

-span[class|align]

and change it to

-span[class|align|style]

Then touch web.config or manually restart the website to read the new config. Log into the umbraco and go to Developer --> Data types --> Richtext editor and you should see the icon for the colour palette. You'll need to tick it to be shown in the content editor.

I think that's all I needed to do!

Here is the code for font color and font size selectors:

<command>
          <umbracoAlias>mcefontselect</umbracoAlias>
          <icon>images/editor/fontselect.png</icon>
          <tinyMceCommand value="" userInterface="true" frontendCommand="fontselect">fontselect</tinyMceCommand>
          <priority>17</priority>
</command>
<command>
          <umbracoAlias>mcefontsizeselect</umbracoAlias>
          <icon>images/editor/fontsizeselect.png</icon>
          <tinyMceCommand value="" userInterface="true" frontendCommand="fontsizeselect">fontsizeselect</tinyMceCommand>
          <priority>18</priority>
</command>

However, you have to make the icons for these two buttons yourself (fontselect.png and forntsizeselect.png) in order for them to be displayed nicely in Data Types->RichText Editor configuation page.

thanks - give more xml snippets for newbies like me

Here's a few more. Took me a bit to stumble around and find them. I'm really loving the customConfig section. Bravo, to whomever came up  with the concept on that.

To remove the "More Colors" link in the text color menu, you have to add the following to the section of the tinyMceConfig.config:

<config key="theme_umbraco_more_colors">false</config>

(Reference: http://www.tinymce.com/wiki.php/Configuration:theme_advanced_more_colors)

Then to limit the colors that are available to the user:

<config key="theme_umbraco_text_colors">000000,0079E3,FF0033</config>

This will limit it to only 3 colors. Of course you can add as many as you like.

(Reference: http://www.tinymce.com/wiki.php/Configuration:theme_advanced_text_colors)

I've tried to add the suggested code about to no avail, has Umbraco fully disabled this in a newer release? I add the exact code and nothing changes, I look in "Developer" > "Data Types" > "Richtext editor" > "Buttons" I don't see the new options. I also don't see them in tinyMCE.

Hi Dane

To see the new buttons after you have added some of the config elements above, make sure that you recycle your app pool - you can simply just touch the web.config file.

Then go back to the developers section and load your rich text editor data type again. Now you should see the new options that can be activated in the RTE.

Hope this helps.

/Jan

@Jan is right. Here's a little walkthrough that may help: https://blunderings.wordpress.com/2012/02/21/using-the-tinymce-color-picker-in-umbraco/

Anyone know where you can customize those font sizes?  

I found the file: editor_template_src.js in the dictionary:

Umbraco_Client\Tinymce3\Themes\Advanced

Umbraco_Client\Tinymce3\Themes\Simple

Umbraco_Client\Tinymce3\Themes\Umbraco

But none of them seem to be ‘active’ (yes I have recycled the app pool )

Hi, 

Is there any update on this one. Using Umbraco 7.

Text colors added and working. But I would like to select colors to pick.

My code:

    <customConfig>
        <!--  <config key="myKey">mySetting</config>-->
        <config key="entity_encoding">raw</config>
        <config key="spellchecker_rpc_url">GoogleSpellChecker.ashx</config>
        <config key="theme_umbraco_more_colors">false</config>
        <config key="theme_umbraco_text_colors">000000,0079E3,FF0033</config>
    </customConfig>

Thanks

Hi Anders

You Probably need to add

in your tinymceconfig.config file as well.

Remember to recycle the app pool (simply touch web.config) and see if the change is taking effect.

Hope this helps.

/Jan

argh, the editor ate my code so it's missing in my first post.

Here it is!

<plugin loadOnFrontend="true">template</plugin>

Hi Jan.

Thanks for this quicky. It did not help me. I have added with.

My plugins:

       <plugin loadOnFrontend="true">template</plugin> <plugin loadOnFrontend="true">code</plugin> <plugin loadOnFrontend="true">paste</plugin> <plugin loadOnFrontend="true">umbracolink</plugin> <plugin loadOnFrontend="true">anchor</plugin> <plugin loadOnFrontend="true">charmap</plugin> <plugin loadOnFrontend="true">table</plugin> <plugin loadOnFrontend="true">textcolor</plugin> <plugin loadOnFrontend="true">lists</plugin>

I have added the textcolor also. The color btn is working. Only thing is to modify the colors inside btn.

Thanks

I'm having the same problem as you Anders. Did you ever figured out any solution?

@Andre, No sorry I have never found solution on costume colors...

I've succeded with this thread

http://our.umbraco.org/forum/umbraco-7/using-umbraco-7/49556-TinyMCE-and-forecolor-%28text-color-picker%29

Didn't need to include

<command>
        <umbracoAlias>mceForeColor</umbracoAlias>
        <icon>images/editor/forecolor.gif</icon>
        <tinyMceCommand value="" userInterface="true" frontendCommand="forecolor">forecolor</tinyMceCommand>
        <priority>27</priority>
      </command>

Hello there

I was in need of a font size editor and found this lovely post, and It works like charm.

However, the icons I've created is not showing up at all, even though I've "touched" the webconfig file and reloaded the side.

<command>
    <umbracoAlias>mcefontsizeselect</umbracoAlias>
    <icon>images/editor/fontsizeselect.gif</icon>
    <tinyMceCommand value="" userInterface="true" frontendCommand="fontsizeselect">fontsizeselect</tinyMceCommand>
    <priority>18</priority>
</command>

Any ideas how to fix this?

Kind Regards Søren

is working on a reply...