Examples | Format styles

<h1>Exploring the mysteries of space</h1>
<p>Space, the final frontier, stretches infinitely beyond the confines of Earth, a vast expanse of darkness speckled with stars, planets, and <b>galaxies</b>. It is a place of profound mystery and beauty, where the laws of physics manifest in ways that challenge our understanding. The cosmos is <a href="https://example/com">a cosmic dance</a> of celestial bodies moving in the silent echo of the universe, from the fiery birth of stars in nebulae to the enigmatic pull of black holes.</p>
<figure>
  <img src="/assets/redactor4/photo.jpg" alt="Blue and purple galaxy">
  <figcaption>Jeremy Thomas <a href="https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg">unsplash.com</a></figcaption>
</figure>
<h2>Humanity's Journey Beyond Earth</h2>
<p>Exploring space has pushed humanity to its limits, revealing not just the universe's grandeur, but also the fragility of our own planet. Satellites orbiting Earth provide crucial data for communication, weather forecasting, and global positioning, while telescopes peer deep into the cosmos, uncovering the universe's age and composition. Each discovery in space leads us to new questions about our place in the universe, driving our insatiable curiosity to explore the unknown.</p>

Code

<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>