modifing the tiny mce style downdown to use both tags and classes

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Allan K. Nielsen 2 posts 22 karma points

Aug 31, 2012 @ 09:13
0

Modifing the Tiny MCE style downdown to use both tags and classes?
Hi,

With Umbraco 4.9 I got a stylesheet with some "p" and "h1" tags and some ".xxxx" classes, which works in the Tiny MCE editor Style dropdown list.

But I want the editing of pages to be as easy and foolproof as possible for my users, and I noted that the editor will only display which style is applied for the ".xxx" classes and not for the HTML tags.

And I got some style classes (with font-size etc.) that I only want users to be able to put on P tags, while others I only want them to apply on H1 tags...

Now Umbraco apparently has a limit for styles to either be tags or classes, but I saw on the following webpage that Tiny MCE does allow it: http://www.tinymce.com/wiki.php/Configuration:style_formats

I saw the wiki page here: http://our.umbraco.org/wiki/how-tos/enabling-the-%27template%27-plugin-for-tinymce which describes how to put in extra config values for the editor, so I tried this similar code:
```
<config key="nonexistingkey">
<![CDATA[',
style_formats : [
        {title : "Bold text", inline : "strong"},
        {title : "Headline classy", block : "h1", classes : "redish"},
        {title : "Headline (H1)", block : "h1" },
        {title : "Red header", block : "h1", styles : {color : "#ff0000"}},
        {title : "Example 1", inline : "span", classes : "example1"},
        {title : "Example 2", inline : "span", classes : "example2"},
    ],
notusedproperty:'xx]]>
</config>
```
I have used Firebug to verify that the above does get included in the backend editing page (I don't care about canvas editing currently) with no javascript errors... But no luck - it did not work...

So - can anyone here tell me if the above might not be possible at all, either due to this config thing requires a version 3.3 of Tiny MCE (is the Umbraco editor is older than that?), or because Umbraco might use it's own code to generate the style dropdown list for Tiny MCE?

Or is there some option somewhere else I can switch to get Umbraco to accept special editor configurations like the above?

PS: I guess that I could always plug in a new version of Tiny MCE (or another RichTextEditor) as my own datatype, but then I'll loose the umbraco image/file handling stuff so it would quickly become quite a bit of work - probably much more work than modifying Umbraco to understand "p.red" as both a tag and a class :-)
Copy Link
Allan K. Nielsen 2 posts 22 karma points

Aug 31, 2012 @ 10:33
0
Okay, after some more playing around with adding more mce-configuration values using the above hack, I realised that the style dropdown list displayed is umbraco's own, and you need to enable a different button to enable the Tiny MCE's own features.

So using the description on the page: http://our.umbraco.org/wiki/how-tos/customizing-the-wysiwyg-rich-text-editor-%28tinymce%29/how-to-add-extra-html-functionality-to-tinymce

I added a new command in the tinyMceConfig.config file:
```
 <command isStyle="true">
      <umbracoAlias>mceStylePicker</umbracoAlias>
      <icon>images/editor/showStyles.png</icon>
      <tinyMceCommand value="" userInterface="false" frontendCommand="styleselect">styleselect</tinyMceCommand>
      <priority>19</priority>
 </command>    
```
(Unsure what the IsStyle-thing does, is probably not needed for the MCE's own style dropdown.)

When I then go to the Data Types I can see two style dropdowns, so I disable Umbraco's and enables Tiny MCE, whereby the above hack of tags+classes works!

Of course, this way you cannot edit the css and style dropdowns in Umbraco, but as I am developing the styles and master pages in Visual Studio, and I don't intend to give text editors access the Settings and Developers pages anyway, this fits my own requirements for a solution to my own question.
Copy Link
is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies

Flag this post as spam?

Modifing the Tiny MCE style downdown to use both tags and classes?