How to add Formatting in Redactor

SimonClay · Jun 23rd 2020

How can we add more style options in Redactor under the Formatting dropdown as described on this page: https://imperavi.com/redactor/…ting/add-formatting-tags/

I'm not referring to adding buttons eg. bold, underline, etc. I'd like to add <small> to the formatting list.

Byron Fitzgerald · Jun 23rd 2020

This is what we use to add a leading paragraph option, and a quote option to the formatting list. Should be found in addons/plugins/editor/config.js

The important stuff is in the get function, which actually adds it to redactor, the load function lets you add some styles to format the editor. Rest should be documented in the link you provided.

Code

Perch.UserConfig.redactor = function () {
var get = function (profile, config, field) {
if (!config.formattingAdd) {
config.formattingAdd = {
'lead': {
title: 'Leading Paragraph',
api: 'module.block.format',
args: {
'tag': 'p',
'class': 'c-leading'
},
'type': 'toggle'
},
'quote': {
title: 'Quote',
api: 'module.block.format',
args: {
'tag': 'blockquote',
'class': 'c-quote'
},
'type': 'toggle'
}
};
}
return config;
};
var load = function (cb) {
$("<style/>").text('.redactor-styles .c-leading { font-size: 1.375rem; line-height: 1.75rem; font-weight: 900; color: #1a298e; } .redactor-styles .c-quote { font-size: 1.375rem; line-height: 1.75rem; letter-spacing: .021em; font-weight: 900; position: relative; border: 0; background: rgba(0,0,0,0); padding-bottom: 30px; max-width: 280px; text-align: right; }').appendTo(document.head);
cb();
};
return {
'get': get,
'load': load
}
}();

Display More

SimonClay · Jun 23rd 2020

Very much appreciated, thank you.

I ended up putting the load function style stuff in perch/plugins/ui to keep it tidy.

Thanks again.

SimonClay · Jun 23rd 2020

.

How to add Formatting in Redactor

Similar Threads

Formatting Text

Different buttons for Redactor in Perch 3?.

custom span calls in redactor