changing how styles are applied in the rich text editor

Go to solution

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

Chris 8 posts 77 karma points

Feb 11, 2015 @ 15:07
0

Changing how styles are applied in the rich text editor

Using Umbraco 7
Hi

I'm looking to allow content editors to style links in the rich text editor to look like buttons (Bootstrap v3) by allowing them to select a style from the Formats dropdown in the rich text editor toolbar.

Now, it is straight forward to setup the style sheet, the style, and the alias.

The challenge I'm facing is that I want my style sheet alias (.btn btn-primary) to be applied directly to the anchor tag rather than be wrapped in a span tag.

So to be clear, currently the rich text editor renders something like:
```
<span class="btn btn-primary"><a href="/{localLink:1065}" title="Home">Test Button</a></span>
```
And I'm look for something like this:
```
<a href="/{localLink:1065}" title="Home" class="btn btn-primary">Test Button</a>
```
After reading the docs here: http://www.tinymce.com/wiki.php/Configuration:style_formats

I know the rich text editor supports doing this and then seeing how things are setup in \umbraco\Js\umbraco.controllers.js around line 8040 the style formats are initialised and this is where css classes are configured to be applied to an inline span tag:
```
if (rule.selector[0] == ".") {
  r.inline = "span";
  r.classes = rule.selector.substring(1);
}
```
As way of testing an idea I've modified the code and added the following test:
```
if (rule.selector.startsWith(".btn") == true) {
  r.selector = "a";
  r.classes = rule.selector.substring(1);
}
```
So the rich text editor renders the html the way I want.

Now I'm looking for a solution I can rollout to production because this hack is flaky at best. Does anybody know if there is the a configuration setting I've missed that can do this? Is there some way I can hook the controller?

Looking forward to hearing others thoughts, Chris.
Copy Link
Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Feb 11, 2015 @ 15:15

0

Hi Chris,

Perhaps, this post can help you to know where to make the changes so you don´t get an span around the links tags,

https://our.umbraco.org/forum/umbraco-7/using-umbraco-7/57593-How-to-alter-TinyMCE-in-718?p=0#comment196573

Hope this can help you,

/Dennis

Copy Link
Per Jungnelius 5 posts 97 karma points

Apr 28, 2016 @ 12:20
101
Hi,

I have the same requirement "adding a bootstrap-style Button-format to the Rich text editor". This seems like a pretty common requirement.

I've found in 7.4.2 that this is possible but not quite straightforward. In a regular RTE you can do it by adding the editor option
```
/**umb_name:Button*/
a.btn.btn-default{}
```
Don't forget the 'a', otherwise it won't work.

This still doesn't solve it for RTE-editors in the Grid though (I guess this must be a bug but I haven't checked if an issues is filed).

To make this work both in the regular RTE and the Grid RTE you have to scrap Umbracos css-annotation way of adding styles and instead add them in the tinyMceConfig.config. In the customConfig-section, add your editor-styles like this:
```
    <config key="style_formats">
  [
  {"title":"H2","block":"h2"},
  {"title":"BlockQuote","block":"blockquote"},
  {"title":"Button","block":"a","classes":"btn btn-default"}
  ]
</config>
```
This works, but deviates from Umbraco's regular cosy way of adding Formats.
Copy Link
Alan Draper 52 posts 135 karma points

Dec 04, 2019 @ 20:24

0

This is awesome, and still works circa 2019 / v8.

Much easier for me to use because now I can use the SCSS-generated CSS (piecemeal) for the RTE, and add styles into the config as I need.

This should be added to the documentation.

Thanks!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?