Expand <ol> capabilities in Redactor
Wrote a Redactor plugin for TeachChemistry.org to expand the built-in <ol> capabilities.
Goal
Update the existing "1. Numbers" button in the Redactor WYSIWYG to have a dropdown that allows admins to choose between 5 different types of ordered lists:
Wrote a Redactor plugin for TeachChemistry.org to expand the built-in <ol> capabilities.
Goal
Update the existing "1. Numbers" button in the Redactor WYSIWYG to have a dropdown that allows admins to choose between 5 different types of ordered lists:
- decimal
- lower-alpha
- lower-roman
- upper-alpha
- upper-roman
Once the user chooses a list, the style is highlighted (given an active state) in the dropdown that persists until the user either changes the selection, or toggles off the list entirely.
How
Create the Redactor plugin, attach a dropdown to the existing ol button, and rename the button to Ordered Lists. To handle the dropdown highlighting, grab the existing link nodes, figure out which one is the dropdown option the user chose, and change its CSS class. Also check for other dropdown options that have that class applied and remove it, so that only one option at a time has the active state applied.
How
Create the Redactor plugin, attach a dropdown to the existing ol button, and rename the button to Ordered Lists. To handle the dropdown highlighting, grab the existing link nodes, figure out which one is the dropdown option the user chose, and change its CSS class. Also check for other dropdown options that have that class applied and remove it, so that only one option at a time has the active state applied.
To change the styles in the editor, grab the parent (<ol>) node and its name and check 3 things:
- If the user clicks on an alreay-in-use style, kill the list entirely
- If there's no list, create one and set the style to the one the user selected from the dropdown
- If there's already a list && its style is different from what the user selected, remove the existing class and add the one the user selected.