rich text editor styles for lists

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

Alex Lindgren 159 posts 356 karma points

Jan 17, 2018 @ 18:20
0

Rich Text Editor styles for lists

Using Umbraco And Getting Started

Umbraco 7
Is it possible to have a style in the Rich Text Editor apply directly to an list, such as:
```
<ul class="list-breaks"><li>...</li></ul> 
```
Copy Link
George 30 posts 122 karma points

Jan 17, 2018 @ 19:14
0
I've found it exceedingly difficult to force a style to attach itself to a particular HTML element. Generally, you end up with something like:
```
<div class="list-breaks">
    <ul><li>...</li></ul>
</div>
```
I usually just update the CSS to accommodate:
```
ul.list-breaks,
.list-breaks ul {
    // styles here
}
```
Copy Link
Alex Lindgren 159 posts 356 karma points

Jan 17, 2018 @ 19:48
0
A div around the list element would work. Do you edit that in WYSIWIG mode? When I highlight the list items in the editor and apply a style, I get something like this:
```
<ul>
<li><span class="list-breaks">One</span></li>
<li><span class="list-breaks">Two </span></li>
<li><span class="list-breaks">Three</span></li>
</ul>
```
Copy Link
George 30 posts 122 karma points

Jan 17, 2018 @ 20:38
0
Ugh. Yeah, sometimes its tough to get the editor to apply the styles the way you want. If you are careful about how much you select and maybe include a line before and/or after the list, you might get it to work.

However, something as delicate as this might require you to step outside of the editor. Another approach I often use is to just have a standard list style for WYSIWYG editors and wrap the output in the view with a style. Obviously that limits your ability to have different list styles in the same editor. This would mean having a standard list in the editor and something like this in the view:
```
<div class="wysiwyg list-breaks">
    @Umbraco.Field("body")
</div>
```
Copy Link
Nicholas Westby 2054 posts 7100 karma points c-trib

Jan 17, 2018 @ 23:24
4
I have done this before by modifying ~/config/tinyMceConfig.config like so:
```
<?xml version="1.0" encoding="utf-8"?>
<tinymceConfig>
    <customConfig>
        <config key="style_formats">[
            {
                "title": "Checkmark List",
                "selector": "ul",
                "classes": "rich-text--checkmarks"
            }
        ]</config>
    </customConfig>
</tinymceConfig>
```
Just a heads up that the quotes in the JSON matter (I think Umbraco doesn't like it if you use unquoted JSON keys).

In my case, I was trying to make a UL have checkmarks rather than bullet points. If you also want the styles to appear in the back office, you can edit the CSS file that Umbraco creates for tinyMCE rich text editors to include the styles:

Remember that you'll have to configure your rich text data type to make use of that stylesheet.
Copy Link
Gavin Semple 21 posts 93 karma points

Feb 12, 2018 @ 12:48

1

Your solution worked like a charm Nicholas, thank you.

Copy Link
OP10 3 posts 175 karma points

Nov 29, 2021 @ 15:23

1

Stil works like a charm for Umbraco Version 8.17.1. Thank you Nicholas.

Copy Link
Danine Noble 75 posts 330 karma points

Dec 16, 2021 @ 00:02

0

Is there some way to accomplish this for v9?

There doesn't appear to be a tinyMceConfig file anymore, just a massive minified js file, and inserting an RTE format for 'ul.class-name' generates a ul tag with the class but no inner li tags.

Not very user friendly ^^;

Edit

Current way I've found to handle this that requires the least amount of knowledge and work for a non-savvy user is to use the 'ul.class-name' in the RTE styles for applying what you need to the ul tag. In my example, making the list two-column -- so you cannot have this on the li tags.

When editing have the editor use the regular UL button, type out their list, highlight it all after they're done & select the special style format from the dropdown.

This encapsulates the existing list with the special ul.class-name instead of putting the class on every li inside the list. It just requires the editor to then go into the Source tab and remove the plain ul /ul tags... ... or you could leave the improper html markup & style around this case so no one notices visually...

Noting this still is pretty ugly, especially for nested lists. It becomes an absolute mess if you try to do this with a list that has a nested list in it.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?