Documentation / Settings

Formatting

formatting #

By default set to:

['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5']

This setting allows to adjust a list of formatting tags in the default formatting dropdown. For example, following settings will only show 'Normal', 'Blockquote' and 'Header 2' in the formatting dropdown:

$('#redactor').redactor({
    formatting: ['p', 'blockquote', 'h2']
});

You can customize this by adding your own tags and CSS classes by setting formattingAdd.

formattingAdd #

This setting allows to create a custom set of formatting options for Formatting dropdown (see Formatting Add example)

formattingAdd can only be applied to p, pre, blockquote, div and heading tags (H1-H6).

Here's an example of adding options to apply and remove Red Block and Blue Heading, and also toggling class of a paragraph:

$('#redactor').redactor({
	formattingAdd: {
	    "red-p-add": {
		    title: 'Red Block Add',
		    args: ['p', 'class', 'red-styled']
	    },
	    "red-p-remove": {
		    title: 'Red Block Remove',
		    args: ['p', 'class', 'red-styled', 'remove']
	    },            
	    "blue-heading": {
		    title: 'Blue Heading',
		    args: ['h3', 'class', 'blue-styled', 'toggle']
	    },    
	    "add-attr": {
		    title: 'Set attributes',
		    args: ['p', { 'data-toggle': 'modal', 'class': 'red-styled' }, 'toggle']
	    }
    }
});

Each style here is an object, that must consist of name (blue-heading), title ("Blue Heading") and an array of arguments:

"style-name": {
	title: 'Title for dropdown',
	args: 'array-of-arguments'
}

Style name can only contain letter, numbers and dashes. Redactor will automatically assign CSS class by name so that you could style dropdown elements.

.redactor-dropdown .redactor-dropdown-red-p-add
.redactor-dropdown .redactor-dropdown-red-p-remove
.redactor-dropdown .redactor-dropdown-blue-header
.redactor-dropdown .redactor-dropdown-add-attr
// etc

Style arguments are set as an array, like this:

['p', 'class', 'red']

First argument is a block element tag. It can only be p, pre, blockquote, div or a heading tag (H1-H6).

Second argument is style type. It can be a class or any other attribute:

['p', 'data-toogle', 'my block']

Third argument is a value of the class or attribute.

By default, when a user applies style, all existing styles of the block will be removed or replaced with the new style. However, there is a way to prevent this by using fourth parameter: add, remove or toggle.

['p', 'class', 'red'] - removes all classes and applies the new value.

['p', 'class', 'red', 'add'] - adds the new value, but doesn't remove or replace existing classes.

['p', 'class', 'red', 'toggle'] - adds the new value if this value didn't exist, and removes it, if the value did exist. No other values will be removed.

['p', 'class', 'red', 'remove'] - removes selected value.

You can apply multiple styles with classes or attributes by groupping them in objects:

['p', { 'data-toggle': 'my block', 'class': 'red' }]

In this case, add, remove and toggle commands are passed as third argument:

['p', { 'data-toggle': 'my block', 'class': 'red' }, 'toggle']