This example shows how to add your styles to the inline menu. Click on the button with three dots (more formatting) and you will see a menu with added styles and classes. Now select some text and apply them.
<style>
.rx-content .text-24 {
font-size: 24px;
}
.rx-content .text-red {
color: #F93943;
}
.rx-content .boldmark {
font-weight: 700;
color: #ff3265;
}
</style>
<!-- element -->
<textarea id="entry">...</textarea>
<!-- call -->
<script>
let app = Redactor('#entry', {
inlineItems: {
'color-red': {
title: '<span style="color: #F93943">Color Red</span>',
params: {
tag: 'span',
style: {
color: '#F93943'
}
}
},
'color-green': {
title: '<span style="color: #1CAC2B">Color Green</span>',
params: {
tag: 'span',
style: {
color: '#1CAC2B'
}
}
},
'text-24': {
title: '<span style="font-size: 24px">Class Text 24px</span>',
params: {
tag: 'span',
classname: 'text-24'
}
},
'text-red': {
title: '<span style="color: #F93943">Class Text Red</span>',
params: {
tag: 'span',
classname: 'text-red'
}
},
'boldmark': {
title: '<span style="font-weight: 700; color: #ff3265;">Boldmark<span>',
params: {
tag: 'span',
classname: 'boldmark'
}
}
}
});
</script>