Changing how styles are applied in the rich text editor
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:
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:
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.
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:
Changing how styles are applied in the rich text editor
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:
And I'm look for something like this:
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:
As way of testing an idea I've modified the code and added the following test:
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.
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
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
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:
This works, but deviates from Umbraco's regular cosy way of adding Formats.
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!
is working on a reply...