<p>I ended up making a custom redactor plugin for this. Code at <a href="https://github.com/FosterCommerce/redactor-alphalist" rel="nofollow noreferrer">https://github.com/FosterCommerce/redactor-alphalist</a> (repo is currently private but should be published soon).</p>

CC BY-SA 4.0
2019-09-10T13:47:06.833Z
Great :) Yes, didn't think about adding in the li's! Plugin seemed the only way.
dmatthams
CC BY-SA 4.0
2019-09-10T18:53:53.413Z
Brilliant! Looks like the repo is public, now—will use this for reference if we find ourselves in a similar situation!
August Miller
CC BY-SA 4.0
2019-09-10T12:40:24.100Z
2019-09-10T12:40:24.100Z
Katie Fritz
<p>Yes, you can add a <a href="https://github.com/craftcms/redactor#configuration" rel="nofollow noreferrer">custom redactor config</a> and add in the <a href="https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd" rel="nofollow noreferrer">formattingAdd setting</a>. Eg.</p>

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

<p>You can then style this with css:</p>

<pre><code>.alpha-ordered {
    list-style-type:upper-alpha
}
</code></pre>

CC BY-SA 4.0
2019-09-10T12:41:22.597Z
The problem with this is it only creates `ol`s, not `li`s, and it will keep creating new `ol` elements every time you click it.
Katie Fritz
CC BY-SA 4.0
2019-09-03T17:59:23.690Z
2019-09-03T17:59:23.690Z
dmatthams
<p>I believe what you're looking for is a combination of two customizations:</p>

<ol>
<li>Adding a custom formatting button via Redactor's <a href="https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd" rel="nofollow noreferrer"><code>formattingAdd</code> option</a>. Config example below! </li>
<li>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 <a href="https://plugins.craftcms.com/cp-css" rel="nofollow noreferrer">Control Panel CSS plugin</a>.</li>
<li>Of course, front-end styles to match.</li>
</ol>

<p>Redactor will expect something like this for your custom formatting rule:</p>

<pre><code>{
    "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"
            }
        }
    }
}
</code></pre>

<p>(This was adapted from Craft's built-in <code>Simple.json</code> config!)</p>

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

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

CC BY-SA 4.0
2019-09-04T13:33:22.277Z
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
CC BY-SA 4.0
2019-09-09T21:47:04.500Z
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
CC BY-SA 4.0
2019-09-10T12:42:16.877Z
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
CC BY-SA 4.0
2019-09-03T19:47:30.307Z
2019-09-03T19:53:00.710Z
2019-09-03T19:53:00.710Z
August Miller
<p>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:</p>

<p>A.</p>

<p>B.</p>

<p>C.</p>

<p>D. </p>

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

<p><strong>EDIT 9/4</strong></p>

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

<redactor>
How to add an alpha ordered list option in Redactor?
# How to add an alpha ordered list option in Redactor?

(Asked by: username_0 on 2019-09-03)

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 , but I haven't found a way to allow `li` elements to be created inside it.

**Tags:** redactor

---

## 3 answers

### Answer by username_0 on 2019-09-10. Score: 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).

> **Comments:**
> **username_1**: Great :) Yes, didn't think about adding in the li's! Plugin seemed the only way.  
> **username_2**: Brilliant! Looks like the repo is public, now—will use this for reference if we find ourselves in a similar situation!  

---

### Answer by username_1 on 2019-09-03. Score: 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
}

> **Comments:**
> **username_0**: The problem with this is it only creates `ol`s, not `li`s, and it will keep creating new `ol` elements every time you click it.  

---

### Answer by username_2 on 2019-09-03. Score: 1

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

Adding a custom formatting button via Redactor's formattingAdd option. Config example below! 
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.
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. ✌️

> **Comments:**
> **username_0**: 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?  
> **username_2**: 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)  
> **username_0**: 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).  

---

