1

In addition to a bulleted unordered list and a numbered ordered list, I'd like to add an option to format text as an ordered list with upper-alpha letters, like this:

A.

B.

C.

D.

Can I add this to the list formatting menu somehow? If now, how would I create a custom formatting option that creates an ol?

EDIT 9/4

I am able to add custom formatting (with formattingAdd) to create <ol class="my-class"></ol>, but I haven't found a way to allow li elements to be created inside it.

2

I ended up making a custom redactor plugin for this. Code at https://github.com/FosterCommerce/redactor-alphalist (repo is currently private but should be published soon).

  • Great :) Yes, didn't think about adding in the li's! Plugin seemed the only way. – user3788089 Sep 10 at 13:47
  • Brilliant! Looks like the repo is public, now—will use this for reference if we find ourselves in a similar situation! – August Miller Sep 10 at 18:53
1

Yes, you can add a custom redactor config and add in the formattingAdd setting. Eg.

formattingAdd: {
    "alpha-ordered": {
        title: 'Alpha Ordered',
        api: 'module.block.format',
        args: {
            'tag': 'ol',
            'class': 'alpha-ordered'
        }
    },
}

You can then style this with css:

.alpha-ordered {
    list-style-type:upper-alpha
}
  • The problem with this is it only creates ols, not lis, and it will keep creating new ol elements every time you click it. – Katie Fritz Sep 10 at 12:41
1

I believe what you're looking for is a combination of two customizations:

  1. Adding a custom formatting button via Redactor's formattingAdd option. Config example below! 👇
  2. Custom CP CSS rules to style the list in the Redactor field as your editor expects it. The strategy for this is up to you, but Double Secret Agency has the simplest method via their Control Panel CSS plugin.
  3. Of course, front-end styles to match.

Redactor will expect something like this for your custom formatting rule:

{
    "buttons": ["italic", "bold"],
    "formattingAdd": {
        "ol-alpha": {
            "title": "Create Letter",
            "api": "module.block.format",
            "args": {
                "tag": "ol",
                "attr": {
                    "class": "my-alpha-ordered-list-class"
                },
                "type": "toggle"
            }
        }
    }
}

(This was adapted from Craft's built-in Simple.json config!)

Keep in mind! This will add a new option to the "Formatting" drop-down menu (i.e. where the headings, blockquote, etc. might appear), not with the List options. I'm not sure exactly how to adjust the options in that menu… 😬

The answer from @user3788089 is about 99% there—I think the only new thing above is re: styling within the control panel. ✌️

  • Thanks! That's one thing I tried, and it does show up in the formatting menu and create <ol class="list-alpha">My Text<ol>, but I can't figure out how to add li elements inside it. Any ideas? – Katie Fritz Sep 4 at 13:33
  • Shooooot! Interesting! I hadn't considered that the list functionality was different, in this respect. It might be possible to make your fomattingAdd option just toggle a class on the existing ol and/or li elements, rather than convert it to/from an ol? (Effectively, I think this would mean just removing the tag key from the config, above) – August Miller Sep 9 at 21:47
  • 1
    No, but I found an answer! See below (sorry code is private at the moment, waiting to make sure it's okay to create a public repo in my company's account). – Katie Fritz Sep 10 at 12:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.