adding font size and font color functions to tiny mce help - Using Umbraco 7

CP 8 posts 78 karma points

Oct 24, 2015 @ 23:16

Adding Font Size and Font Color functions to Tiny MCE - HELP!

Hi All,

I followed these instructions for editing the Config file for adding Font Size and Font Color functionality to Tiny MCE with no success. I am running Umbraco 7.3.0.

http://velstand.info/tips/umbraco/umbraco7-post-screen-to-change-the-font-size-and-color/

Even though the toolbars appear in the Developers, DataTypes, Rich Text Editor section, and I put a checkmark in their boxes, Font Size and Font Color still do not appear in the Tiny MCE toolbar. I recycled the AppPool, restarted IIS, and even tried rebooting the Server with no success.

Is there a step I am missing?

For that matter, why is Tiny MCE so reduced in functionality in Umbraco 7.3.0? Is there a way to just upgrade the Tiny MCE version to get all the bells and whistles by default?

Thanks!

Copy Link

Martin 114 posts 313 karma points

Oct 25, 2015 @ 10:13

Have a look at this:

http://velstand.info/tips/umbraco/umbraco7-post-screen-to-change-the-font-size-and-color/

I had the same issue with earlier versions of Umbraco 7.

Hope you solve it.

/martin

Copy Link

CP 8 posts 78 karma points

Oct 25, 2015 @ 19:52

Thanks Martin, but that is the same exact link referenced in my post. I followed the instructions to the T, but still have not been able to get it to work. Were you able to get it to work in Umbraco 7.3.0?

Copy Link

Martin 114 posts 313 karma points

Oct 25, 2015 @ 20:02

Oh sorry about the link, I must have pasted the wrong link by mistake. But try using:

 <!-- Font color selector tool -->
<command>
<umbracoAlias>mceForeColor</umbracoAlias>
<icon>images/editor/forecolor.gif</icon>
<tinyMceCommand value="" userInterface="true" frontendCommand="forecolor">forecolor</tinyMceCommand>
<priority>75</priority>
</command>

        <!-- Font family selector tool -->
<command>
<umbracoAlias>mcefontselect</umbracoAlias>
<icon>images/editor/fontselect.png</icon>
<tinyMceCommand value="" userInterface="true" frontendCommand="fontselect">fontselect</tinyMceCommand>
<priority>17</priority>
</command>

        <!-- Font size selector tool -->
<command>
<umbracoAlias>mcefontsizeselect</umbracoAlias>
<icon>images/editor/fontsizeselect.png</icon>
<tinyMceCommand value="" userInterface="true" frontendCommand="fontsizeselect">fontsizeselect</tinyMceCommand>
<priority>18</priority>
</command>

That works for me. I am not sure if the priority number has something to to with it.

Copy Link

CP 8 posts 78 karma points

Oct 25, 2015 @ 23:58

Many thanks again Martin...

I followed your instructions with no success...

My editing of the config file looks are follows:

tinymceconfig1

enter image description here

Afterwards, I put checkmarks on the Toolbars in the Developers, DataTypes, RichTextEditor section.

enter image description here

I recycle the AppPool, restart the website in IIS, and even reboot the server with no success. Am I missing a step?

Copy Link

stevenqb 7 posts 119 karma points

Oct 26, 2015 @ 04:04

Hi Christopher,

I have followed the instruction in the link that you've given, it's working for me. I tested on v7.30

The fontselect and fontsizeselect commands will work without adding the plugin config. But the forecolor command need the plugin config as given in the link.

Here my sample adding configs

   <!-- Font family selector tool -->
    <command>
        <umbracoAlias>mcefontselect</umbracoAlias>
        <icon>images/editor/fontselect.png</icon>
        <tinyMceCommand value="" userInterface="true" frontendCommand="fontselect">fontselect</tinyMceCommand>
        <priority>17</priority>
    </command>

    <!-- Font size selector tool -->
    <command>
        <umbracoAlias>mcefontsizeselect</umbracoAlias>
        <icon>images/editor/fontsizeselect.png</icon>
        <tinyMceCommand value="" userInterface="true" frontendCommand="fontsizeselect">fontsizeselect</tinyMceCommand>
        <priority>18</priority>
    </command>
    <!--Add the font color selection-->
    <command>
        <umbracoAlias>mceForeColor</umbracoAlias>
        <icon>images/editor/forecolor.gif</icon>
        <tinyMceCommand value="" userInterface="true" frontendCommand="forecolor">forecolor</tinyMceCommand>
        <priority>19</priority>
    </command>

and the plugin configs

<plugins>
    <plugin loadOnFrontend="true">code</plugin>
    <plugin loadOnFrontend="true">codemirror</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">lists</plugin>
    <!-- Plugin config for ForeColor command -->
    <plugin loadOnFrontend="true">textcolor</plugin>
</plugins>

After editing, I just restart IIS and it would be working.

Hope you solve it.

Copy Link

Martin 114 posts 313 karma points

Oct 26, 2015 @ 07:31

A long-shot perhaps, but in v 7.3.0 it is stated under issues and tasks:

U4-5689 - update to latest TinyMCE 4.x version

I see that you are using TinyMCEv3, maybe this could be causing your problems?

Copy Link

is working on a reply...

Flag this post as spam?

Adding Font Size and Font Color functions to Tiny MCE - HELP!