We have moved to GitHub Issues
Created by Stephan 19 Feb 2013, 11:33:48 Updated by Barry Fogarty 09 Aug 2016, 12:21:08
Relates to: U4-6267
Relates to: U4-7475
At the moment, styles in TinyMCE can be either an element (h2) which will change the current block to that element, or a class (.foo) which will change the style of the selection. But a combination of both is not supported eg h2.foo will ''not'' change the current block to h2 ''and'' add the class, as we would expect.
I've been working on a patch for this for Umbraco 7.
TinyMCE supports this functionality out of the box (at least V4 that Umbraco 7 uses does) its only a matter of translating the css selector into appropriate configuration for TinyMCE.
The TinyMCE documentation is here: http://www.tinymce.com/wiki.php/Configuration:style_formats http://www.tinymce.com/wiki.php/Configuration:formats
I suspect the reason this hasn't been done before is that it's not obvious what you want the style to do from it's css selector alone:
for example: div.class - Should this format a) transform the selected element into a div and apply the class or b) should it the format only apply when the user has selected a div. img.class - If the answer above was a) then what happens in the case of an img tag? you can't turn a p into an img.
for example: div.class - Should the format a) turn the selected paragraph into a div or b) wrap the selected paragraph(s) with a div? what about other block level elements like blockquotes or the plethora of HTML5 ones?
The Umbraco 7 implementation did the following:
In the project I'm working on, I've isolated the following use cases:
I've had some difficulty in coming up with an explicit selector syntax to identify the use cases so would welcome some feedback on the following suggested syntax for the use cases above:
It may be possible to infer the last two use cases by the type of block element involved?
If no one has any objections to the above syntax, I'll prepare a pull request early next week.
(Sorry for the long read!)
Sounds like you've been struggeling. Do prepare the pull request! :)
Antony - any update on the pull request? We are looking at implementing the same thing.
Hi, any news on the patch? I think it would be very handy for a lot of people, me included.
Any updates on this functionality? v6 was applying classes to my without issue, but now after upgrading to v7, it is wrapping the images w/ span (which is not useful for block level type adjustments > i.e. floating, margins, etc.)
Use case 4 should be for any element, not just block level. I'm looking to apply a class to a link and it doesn't look possible with the way Umbraco configures TinyMCE.
I don't think the * is needed in the selector, as [tagname].[classname] is an identifiable pattern which could be used.
Having this issue too, making some things quite hard to style. Is there any update/news to this?
Any progress on this?
U7's rich text editor is really pretty broken as it stands (previous versions might have been a bit unreliable in what they applied styles to, but at least it was possible to style block level elements - in U7 it can only be done by editing source, which is completely useless for most editors).
Other platforms that use tinymce manage to do this much better, so it is at least in part about Umbraco.
PR is here: https://github.com/umbraco/Umbraco-CMS/pull/630
I have merged in this PR and am testing a few things. The PR makes sense however it doesn't cover all use cases outlined by Anthony but allows you to define element + classes (including composite ones), so you could do 'div.class1.class2' which will become <div class='class1 class2', etc...
For more advanced rule sets, let's open a new issue for that.
I've created a new issue here to look at more advanced rules: http://issues.umbraco.org/issue/U4-6267
Looks like this needs to be added to the grid rte as well - I believe that code lives in a different spot?
How do we implement this now in 7.2.2? Our custom configuration from 7.1.8 no longer works. O_o http://issues.umbraco.org/issue/U4-6344
Any feedback would be wonderful!
@Shandem I can't get this to work in 7.3.2 - if I try to add e.g. an h1.myClass (alias) to my RTE stylesheet, it is ignored by the RTE in Grid editor mode.
This is only the case in the Grid RTE, it works as expected in an ordinary RTE, where h1.myClass becomes <h1 class="myClass"....
I can confirm @larsbuur's report above - specific element styling e.g. h1.myClass works fine in a non-grid RTE but the styles are just ignored when the RTE is ignored in the grid. NB It does work OK if you use a global style_formats config in TinyMCE (see http://issues.umbraco.org/issue/U4-6344). This is not ideal however, as we cannot have separate configurations for different RTE instances. Using v7.4.3. Is there an open issue this can be linked to, that pertains specifically to the Grid RTE?
Ah yes - link to http://issues.umbraco.org/issue/U4-7475 - seems a fix is due in 7.5
Type: Feature (request)
Assignee: Shannon Deminick
Backwards Compatible: True
Fix Submitted: Pull request
Affected versions: 7.4.2
Due in version: 7.2.2