Hi,

I'm hoping someone can help me with the custom styles on the richtext field. I wanted to have it so you can add a class to an ordered list so that it can be changed from a lower-latin to a decimal list.

I've added the code to the .js file but it seems to choke on the fact that the element specified is an ol, rather than e.g. a paragraph.

Code: Select all

{ name : 'Decimal List'   , element : 'ol', attributes : { 'class' : 'decimal' } }

Does anyone know if it's possible to add a class to an <ol> using custom styles?

I have found a way around this if it's not possible by specifying the element as a div. You then just have to highlight text and select the options in a specific order and it adds the classes to the <li>s. It's workable but just a little fiddly!

Thanks
Daz

[KK]

Would appreciate if any JS ninja could chip in

I'm more of a JS Mr. Bean , but

Code: Select all

{ name : 'Decimal List'   , element : 'ol', attributes : { 'class' : 'decimal' } }

worked for me. It applies the style "decimal" to the OL element. Sometimes I've found that I have to hard refresh the admin page to get the style added to the list. Another problem I run into is adding the style at the end of the JS file, but forgetting the comma. Anyway, it seems like there must be something wrong with your cache or your code, because it worked for me.

Hi,

Thanks for your info. I have got it to work by hard reloading the admin section however it is extremely buggy to use.

From playing around, It appears that the 'styles' dropdown is greyed out unless the ol is the first element in the editor. Even then it needs to be specified as an ol and then the page saved before I get the options in the dropdown.

Any ideas as to why this is happening?

Thanks
Daz

ok, a small update to the above. If I add an additional custom style, e.g.

Code: Select all

{ name : 'Para'   , element : 'p', attributes : { 'class' : 'para' } }

then that negates the issue I described and the styles dropdown is always available.

Whilst this a possible solution, it's still not ideal as the additional entry is redundant.

Thanks
Daz

Hi @dzauk. In order for any style to be selectable in the "styles" dropdown, the cursor has to actually be in the appropriate element. Since the style is meant to apply to an OL element, it's only available with the cursor on an OL element.

From playing around, It appears that the 'styles' dropdown is greyed out unless the ol is the first element in the editor. Even then it needs to be specified as an ol and then the page saved before I get the options in the dropdown.

When the OL is the first element, AND the page is saved... voila! the cursor is in the right place. When you created a dummy style for a P element, the styles tab is almost always active because the way the editor works, you're almost always in a P element. Try creating a different element, say a H2. You should find that the styles tab is disabled when the cursor is on that H2 element.

In order for your custom style to be applicable, simply create an OL element anywhere on the page and have the cursor on/in that element in order to apply the style to it.

I hope that helps. Custom styles can be a little fussy, but they're quite useful once you get all the details sorted out.

Off on a slight tangent... There's no simple way to remove a custom style once you've applied it. You can go into the source code editor and remove the style, but that's kind of awkward and a little too technical for some. If you think you might change your mind and undo a custom style, I like to add a style for returning to normal.

Code: Select all

{ name : 'Normal', element : 'ol', attributes : { 'class' : '' } }