Migrate custom editor styles from classic editor to Enhanced Editor
Migrate custom styles from the classic editor to the Enhanced Editor by mapping your existing JavaScript configuration to the new Custom Editor Styles form fields.
How the Editors compare
Each config.stylesSet.push() block in your old configuration becomes one style entry in the Enhanced Editor. The following table explains how each property maps to the new form fields:
| Classic editor property | Enhanced Editor field | Example value |
|---|---|---|
name |
Name | Warning |
element |
Selector | div |
attributes > class |
Class | mt-warning-container |
wrap: true |
Element Wrapping (checked) | Check the box |
wrap: false or omitted |
Element Wrapping (unchecked) | Leave the box unchecked |
attributes > title |
Not present | N/A |
Add your styles in the Enhanced Editor
Repeat these steps once for each style in your old configuration.
- Go to Site Tools > Dashboard > Site Administration > Editor Configuration.
- Click the Custom Editor Styles sub-page.
- Click Add style.
- Fill in the Name, Selector, and Class fields using the values from your old configuration (see previous table).
- For Element Wrapping:
- Check the box if your old style had
wrap: true. - Leave the box unchecked if your old style had
wrap: falseor no wrap property.
- Check the box if your old style had
- Click Save.
Example
Given this configuration in the classic editor:
config.stylesSet.push({ name : 'Warning', element : 'div', wrap:true, attributes : { 'class' : 'mt-warning-container', 'title' :'Warning' } });
config.stylesSet.push({ name : 'Note', element : 'div', wrap:true, attributes : { 'class' : 'mt-notes-container', 'title' :'Note' } });
config.stylesSet.push({ name : 'Caution', element : 'div', wrap:true, attributes : { 'class' : 'mt-caution-container', 'title' :'Caution' } });
config.stylesSet.push({ name : 'Tip', element : 'div', wrap:true, attributes : { 'class' : 'mt-tip-container', 'title' :'Tip' } });
You would create four styles in the Enhanced Editor with these values:
| Name | Selector | Class | Element wrapping |
|---|---|---|---|
| Warning | div | mt-warning-container | Checked |
| Note | div | mt-notes-container | Checked |
| Caution | div | mt-caution-container | Checked |
| Tip | div | mt-tip-container | Checked |
Custom Site CSS does not need to change. The CSS that defines how your classes look is separate from the editor configuration, and was not affected by the editor upgrade.
If styles do not render, verify your CSS is present in Site Tools > Control Panel > Branding > Custom Site CSS.
Related articles
Add custom styles to Editor (classic editor)
Custom Editor Styles (Enhanced Editor)