This example shows how to add your styles to the format menu and how to add item to the addbar (+) menu.
<style>
.rx-content .lead {
font-size: 20px;
}
.rx-content .small {
font-size: 14px;
}
.rx-content .note {
padding: 16px 20px;
border-radius: 8px;
background: #FEF2C3;
color: #645F4A;
border: none;
}
</style>
<!-- element -->
<textarea id="entry">...</textarea>
<!-- call -->
<script>
let app = Redactor('#entry', {
addbarItems: {
"note": {
title: 'Note',
icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V13C21 13.2652 20.8946 13.5196 20.7071 13.7071L13.7071 20.7071C13.5196 20.8946 13.2652 21 13 21H6C5.20435 21 4.44129 20.6839 3.87868 20.1213C3.31607 19.5587 3 18.7956 3 18V6C3 5.20435 3.31607 4.44129 3.87868 3.87868ZM6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V18C5 18.2652 5.10536 18.5196 5.29289 18.7071C5.48043 18.8946 5.73478 19 6 19H12V14C12 13.4696 12.2107 12.9609 12.5858 12.5858C12.9609 12.2107 13.4696 12 14 12H19V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H6ZM17.5858 14H14V17.5858L17.5858 14Z"/></svg>',
command: 'block.add',
position: { after: 'text' },
template: '<p class="note" data-placeholder="Type note here..."></p>'
}
},
formatItems: {
"lead": {
title: '<span style="font-size: 20px">Lead</span>',
type: 'text',
params: {
tag: 'p',
classname: 'lead'
}
},
"small": {
title: '<span style="font-size: 14px">Small</span>',
type: 'text',
params: {
tag: 'p',
classname: 'small'
}
},
"note": {
title: '<span style="padding: 6px 8px; background-color: #FEF2C3; color: #645F4A;">Note</span>',
type: 'text',
params: {
tag: 'p',
classname: 'note'
}
}
}
});
</script>