Help with adding formatting to redactor

tonyastley · May 6th 2021

I require assistance in adding extra formatting options into redactor. A while back I successfully installed the inline perch assets plugin, but cannot fathom where the settings need to go to add extra formatting options and other plugins into redactor.

Code

Perch.UserConfig.redactor = function () {
let fixResizer = function() {
$('head').append('<style type="text/css">#redactor-image-resizer { z-index: 1000; }</style>');
}
let load = function (cb) {
jQuery.getScript(
Perch.path + '/addons/plugins/editors/redactor-plugins/pipit_inlineperchassets/inlineperchassets.js',
function() {
fixResizer();
cb();
});
}
let get = function (profile, config, field) {
config.plugins = config.plugins.filter(function (item) {
return item !== 'perchassets'
})
if (config.plugins.indexOf('inlineperchassets') === -1)
config.plugins.push('inlineperchassets');
config.imageResizable = true;
config.imagePosition = true;
config.buttonsHide = ['deleted'];
config.buttonsAdd = ['sup', 'sub', 'line'];
config.buttonsAddBefore = { before: 'html', buttons: [] };
return config;
};
return {
'get': get,
'load': load
}
}();

Display More

The buttons hide, add and add before work OK.

Where would I start for adding formatting?

ex-jedi · May 8th 2021

If it's useful here's my config file. It has the alignment and font colour plugins, plus some custom classes.

Code

Perch.UserConfig.redactor = (function () {
const get = function (profile, config, field) {
config.plugins = ['fontcolor', 'alignment'];
config.buttons = ['link', 'bold', 'italic', 'format', 'ol', 'ul', 'html'];
config.formatting = ['p', 'h3', 'h4'];
config.fontcolors = ['#fdfcfa', '#5bb072', '#535cb0', '#b09b53', '#b07677'];
config.formattingAdd = {
'gold-subheading-add': {
title: 'Gold Subheading',
api: 'module.block.format',
args: {
tag: 'h3',
class: 'h3-gold-subheading',
},
},
'gold-subheading-remove': {
title: 'Remove Gold Subheading',
api: 'module.block.format',
args: {
tag: 'h3',
class: 'h3-gold-subheading',
type: 'remove',
},
},
'split-text-heading-add': {
title: 'Heading Text Animation',
api: 'module.block.format',
args: {
class: 'split-text-heading-animation',
},
},
'split-text-heading-remove': {
title: 'Remove Heading Text Animation',
api: 'module.block.format',
args: {
class: 'split-text-heading-animation',
type: 'remove',
},
},
'split-text-body-add': {
title: 'Body Text Animation',
api: 'module.block.format',
args: {
class: 'split-text-body-animation',
},
},
'split-text-body-remove': {
title: 'Remove Body Text Animation',
api: 'module.block.format',
args: {
class: 'split-text-body-animation',
type: 'remove',
},
},
};
return config;
};
const load = function (cb) {
jQuery.getScript(`${Perch.path}/addons/plugins/editors/redactor-plugins/alignment.js`);
jQuery.getScript(`${Perch.path}/addons/plugins/editors/redactor-plugins/fontcolor.js`, cb);
};
return {
get,
load,
};
})();

Display More

tonyastley · May 10th 2021

Thanks for this, I'll give this a shot.

ex-jedi · May 12th 2021

Good stuff. Let us know how you get on.

tonyastley · May 12th 2021

Works great. I've used your example/technique for adding and removing block level styles.

I used it in combination with this link on Clives blog:

https://github.com/montlewis/perch-redactor-default

This really helped me get redactor where I needed it allowing insertion of precoded blocks, giving the user a link list (although not collection items), a clear explanation of how to get your own styles into the editor.

Looking at the syntax within the config.js file I would never have worked it out for myself.

Take this section for example:

Code

let load = function(cb) {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/clips.js', function() {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/inlinestyle.min.js', function() {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/fontcolor.js', function() {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/table.min.js', function() {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/video.min.js', function() {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/properties.js', function() {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/alignment.min.js', function() {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/fullscreen.js', function() {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/widget.js', function() {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/counter.js', function() {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/definedlinks.js', function() {
jQuery.getScript(Perch.path + '/addons/plugins/editors/redactor-plugins/pipit_inlineperchassets/inlineperchassets.js', function() {
fixResizer();
cb();
});
});
});
});
});
});
});
});
});
});
});
});
};

Display More

All working great though thanks.