<!-- element -->
<textarea id="content"></textarea>
<!-- add style to dropdown -->
<style>
.redactor-dropdown-format .redactor-dropdown-item-red-p-add {
color: red;
font-weight: bold;
}
.redactor-dropdown-format .redactor-dropdown-item-blue-heading {
color: blue;
font-weight: bold;
}
</style>
<!-- add style to content -->
<style>
.redactor-styles .red-styled {
color: red;
font-weight: bold;
}
.redactor-styles h3.blue-styled {
color: blue;
font-weight: bold;
}
</style>
<!-- call -->
<script>
$R('#content', {
formattingAdd: {
"red-p-add": {
title: 'Red Paragraph',
api: 'module.block.format',
args: {
'tag': 'p',
'class': 'red-styled'
}
},
"red-p-remove": {
title: 'Red Paragraph Remove',
api: 'module.block.format',
args: {
'tag': 'p',
'class': 'red-styled',
'type': 'remove'
}
},
"blue-heading": {
title: 'Blue Heading',
api: 'module.block.format',
args: {
'tag': 'h3',
'class': 'blue-styled',
'type': 'toggle'
}
},
"toggle-attr": {
title: 'Toggle attributes and style',
api: 'module.block.format',
args: {
'tag': 'p',
'attr': {
'data-toggle': 'modal',
'class': 'my-class'
},
'style': {
'color': '#90c'
},
'type': 'toggle'
}
}
}
});
</script>