Examples | Content appearence

<h1>
    Hanc ego cum teneam sententiam, quid bonum sit aut contra
</h1>
<p class="lead">
    Probabo, inquit, sic agam, ut ratione neque porro quisquam est, necesse est, qui dolorem aspernari ut enim ad naturam aut odit aut reiciendis voluptatibus maiores alias consequatur aut fugiat aliquid, praeter voluptatem ipsam.
</p>
<p class="dropcap">
    Primum igitur, quid percipit aut in armatum hostem impetum fecisse aut voluptates repudiandae sint et expedita distinctio nam libero cum memoriter, tum etiam ac ratione et benivole collegisti, nec me tamen laudandis maioribus meis corrupisti nec voluptas nulla pariatur? at magnum periculum adiit in.
</p>
<h2>
    Primum igitur, quid est primum
</h2>
<p>
    Sunt autem quibusdam et voluptates omittantur maiorum dolorum fuga et molestiae non intellegamus, tu paulo ante cum a se texit, ne ad modum, quaeso, interpretaris? sicine eos censes aut perferendis doloribus asperiores repellat hanc ego assentior, cum a natura incorrupte atque corrupti, quos tu paulo.
</p>
<figure>
    <img src="/assets/redactor4/article-01-1.jpg">
    <figcaption>
        Quae fuerit causa, nollem me tamen laudandis maioribus meis corrupisti.
    </figcaption>
</figure>
<p>
    In oculis quidem rerum hic tenetur a philosophis compluribus permulta dicantur, cur nec segniorem ad modum, quaeso, interpretaris? sicine eos et dolore suo sanciret militaris imperii disciplinam exercitumque in liberos atque insitam in liberos atque in liberos atque insitam in malis dolor, non provident, similique.
</p>
<h2>
    In oculis quidem exercitus
</h2>
<figure class="float-right">
    <img src="/assets/redactor4/article-01-2.jpg">
    <figcaption>
        Certe, inquam, pertinax non intellegamus
    </figcaption>
</figure>
<p>
    Sed ut de commodis suis cogitarent? at id omnia referri oporteat, ipsum per se esse ratione intellegi posse et expedita distinctio nam libero tempore, cum a natura incorrupte atque integre iudicante itaque earum motus et impetus quo pertineant non possim accommodare torquatos nostros? quos dolores.
</p>
<p>
    Tum dicere exorsus est eligendi optio, cumque nihil est, quid aut dolores eos, qui officia deserunt mollitia animi, id omnia referri oporteat, ipsum autem nusquam hoc tenebo, si ob aliquam causam ista, quae dices, libenter assentiar probabo, inquit, modo ista sis aequitate, quam ostendis sed.
</p>
<h2>
    Primum igitur, inquit, sic agam
</h2>
<p>
    Primum igitur, inquit, sic agam, ut de voluptate et aut voluptates omittantur maiorum dolorum fuga et dolore disputandum putant sed ut perspiciatis, unde omnis voluptas sit, amet, consectetur, adipisci velit, sed quia consequuntur magni dolores et fortibus viris commemorandis eorumque factis non fuisse torquem detraxit.
</p>
<figure>
    <blockquote>
        <p>
            Hanc ego cum a philosophis compluribus permulta dicantur, cur verear, ne interiret at vero eos censes aut reiciendis voluptatibus maiores alias consequatur aut reiciendis voluptatibus maiores alias consequatur.
        </p>
    </blockquote>
    <figcaption>
        — John Smith
    </figcaption>
</figure>
<p>
    Quid ex ea quid est laborum et quale sit id, de quo pertineant non fuisse torquem detraxit hosti et quidem rerum facilis est primum igitur, inquit, modo ista sis aequitate, quam interrogare aut quid bonum sit numeranda nec voluptas assumenda est, necesse est, necesse est.
</p>

Code

<!-- font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&amp;family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap&amp;1702898754417">

<!-- style -->
<style>
.rx-container,
.rx-editor {
    background: #f5f5f5;
}
.rx-content {
    font-family: "Montserrat", sans-serif;
}
.rx-content figure img {
    border-radius: 6px;
}
.rx-content h1 {
    font-size: 42px;
}
.rx-content .float-right {
    margin-top: 24px;
}
.rx-content .dropcap:first-letter {
    float: left;
    padding: 0 0.1em 0 0;
    font-size: 72px;
    line-height: 72px;
    font-family: "Merriweather", serif;
}
.rx-content .lead {
    font-weight: bold;
    font-size: 20px;
}
.rx-content .quote {
    position: relative;
    padding-left: 44px;
    border-left: none;
}
.rx-content .quote:before {
    position: absolute;
    top: -4px;
    left: 0;
    content: "\201C";
    font-style: normal;
    font-size: 80px;
    line-height: 1;
    color: #F1E016;
}
.rx-content .quote p {
    font-family: "Merriweather", serif;
    font-weight: bold;
    font-style: normal;
    font-size: 18px;
}
.rx-content .quote figcaption {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-style: normal;
    color: rgba(3, 25, 39, 0.5);
}
</style>


<!-- element -->
<textarea id="entry">...</textarea>

<!-- call -->
<script>
let app = Redactor('#entry', {
    width: '75%',
    padding: '32px 0 64px 0',
    classes: {
         blocks: {
            'quote': 'quote'
         }
    },
    formatItems: {
        lead: {
            title: "Lead",
            type: 'text',
            params: {
                tag: 'p',
                classname: 'lead'
            }
        },
        dropcap: {
            title: "Dropcap",
            type: 'text',
            params: {
                tag: 'p',
                classname: 'dropcap'
            }
        }
    },
    image: {
        upload: '/your-path-to-upload'
    }
});
</script>