Examples | Article #4

<h1>Torquem detraxit hosti et quidem se texit</h1>
    <div data-block="layout">
        <div data-block="column" style="flex-basis: 60%;">
            <figure>
                <img src="/assets/redactor4/articles/img/article-04-1.jpg" />
                <figcaption>Probabo, inquit, sic agam, ut de commodis suis cogitarent? at.</figcaption>
            </figure>
        </div>
        <div data-block="column" style="flex-basis: 40%;">
            <p class="lead">At magnum periculum adiit in oculis quidem se esse admonere interesse enim ad respondendum reddidisti quorum facta quem ad modum, quaeso, interpretaris? sicine eos et dolore disputandum putant sed ut et rationibus confirmare, tantum satis esse.</p>
        </div>
    </div>
    <h2>Teneam sententiam, quid percipit</h2>
    <p>Quae fuerit causa, nollem me ab eo delectu rerum, quem modo dixi, constituto, ut calere ignem, nivem esse expetendam et argumentandum et voluptatem accusantium doloremque laudantium, totam rem aperiam eaque gaudere ut labore et impetus quo enim ad eam non provident, similique sunt in gravissimo.</p>
    <p>Torquem detraxit hosti et quidem exercitus quid ex eo delectu rerum, quem modo ista sis aequitate, quam ostendis sed animo etiam erga nos causae confidere, sed animo etiam erga nos amice et accurate disserendum et argumentandum et accusamus et impetus quo aut fugiat aliquid, praeter.</p>
    <p>Certe, inquam, pertinax non recusandae itaque earum rerum facilis est primum igitur, inquit, modo dixi, constituto, ut ad minima veniam, quis autem quidam e nostris, qui blanditiis praesentium voluptatum adipiscendarum causa aut in armatum hostem impetum fecisse aut fugiat aliquid, praeter voluptatem ipsam voluptatem, quia.</p>
    <figure>
        <blockquote>
            <p>Laudem et quale sit voluptatem sequi nesciunt, neque porro quisquam est, necesse est, qui officia deserunt mollitia animi, id totum evertitur eo est primum igitur, quid aut rerum hic tenetur </p>
        </blockquote>
        <figcaption>— John Smith</figcaption>
    </figure>

<h2>Et quidem rerum necessitatibus saepe eveniet</h2>
    <p>Ut placet, inquam tum dicere exorsus est eligendi optio, cumque nihil est, necesse est, quid percipit aut fugit, sed animo etiam erga nos amice et rationibus conquisitis de voluptate et voluptatem appetere eaque ipsa, quae dices, libenter assentiar probabo, inquit, sic agam, ut de commodis.</p>
    <p>Certe, inquam, pertinax non ero tibique, si mihi probabis ea, quae sunt vitae dicta sunt, explicabo nemo enim maxime placeat, facere possimus, omnis voluptas expetenda, fugiendus dolor sit, amet, consectetur, adipisci velit, sed quia voluptas in armatum hostem impetum fecisse aut quid et quasi naturalem.</p>
    <p>In quo aut fugit, sed quia non recusandae itaque negat opus esse fugiendum itaque earum motus et negent satis esse albam, dulce mel quorum nihil ut de voluptate velit esse, quam interrogare aut fugit, sed ut ratione et quasi architecto beatae vitae dicta sunt, explicabo.</p>

Code

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

<!-- call -->
<script>
Redactor('#entry', {
    plugins: ['blockclass', 'alignment'],
    css: '/your-dist-path/',
    classname: 'entry',
    padding: '60px 80px',
    custom: {
        css: [
            'https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap',
            '/path-to/content.css'
        ]
    },
    classes: {
        blocks: {
            'quote': 'quote'
        }
    },
    formatItems: {
        'lead': {
            title: 'Lead',
            params: {
                tag: 'p',
                classname: 'lead'
            }
        }
    }
});
</script>