Examples | Article #7

<h1>Filium morte multavit si sine metu degendae praesidia</h1>
    <p class="lead">Ut placet, inquam tum dicere exorsus est eligendi optio, cumque nihil ut ita ruant itaque negat opus esse admonere interesse enim inter mediocrem animadversionem atque.</p>
    <h2>Omne animal, simul</h2>
    <p>Torquatos nostros? quos tu tam inportuno tamque crudeli; sin, ut aut quid malum, sensu iudicari, sed quia voluptas in sanguinem suum tam crudelis fuisse, nihil ut et negent satis esse ratione intellegi posse et benivole collegisti, nec voluptas sit, aspernatur aut rerum hic tenetur.</p>
    <h3>Bonis sit voluptatem</h3>
    <p>At vero eos censes aut reiciendis voluptatibus maiores alias consequatur aut quid iudicat, quo quaerimus, non existimant oportere nimium nos causae confidere, sed uti oratione perpetua malo quam ob aliquam causam ista, quae sine dubio.</p>
    <figure class="leader outset-both">
        <img src="/assets/article/articles/img/article-07-1.jpg" />
        <figcaption>Quid ex eo delectu rerum, quem modo dixi, constituto, ut.</figcaption>
    </figure>
    <div class="grid">
        <div class="column column-3">
            <figure>
                <img src="/assets/article/articles/img/article-07-2.jpg" />
                <figcaption>Certe, inquam, pertinax non numquam eius modi tempora incidunt, ut aliquid ex ea commodi consequatur? quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut labore et argumentandum.</figcaption>
            </figure>
        </div>
        <div class="column column-9">
            <h2>In oculis quidem se oratio</h2>
            <p>Ut placet, inquam tum dicere exorsus est primum igitur, inquit, sic agam, ut de homine sensibus reliqui nihil oportere exquisitis rationibus conquisitis de commodis suis cogitarent? at id totum evertitur eo est et quasi architecto beatae vitae sine causa? quae fuerit causa, mox videro; interea.</p>
            <blockquote>
                <p>Quae fuerit causa, mox videro; interea hoc epicurus in malis dolor</p>
            </blockquote>
            <p>Omne animal, simul atque in liberos atque admonitionem altera occulta quaedam et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in bonis sit extremum et accusamus et caritatem, quae dices, libenter assentiar probabo, inquit, sic agam, ut calere ignem, nivem esse fugiendum itaque.</p>
        </div>
    </div>

Code

<!DOCTYPE html>
<html>
<head>
    <title>Article Editor</title>
    <meta charset="utf-8">

    <!-- css -->
    <link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
</head>
<body>
    <!-- element -->
    <textarea id="entry">
        <p>Content</p>
    </textarea>

    <!-- js -->
    <script src="/your-article-dist-path/article-editor.min.js"></script>
    <script src="/your-article-dist-path/plugins/style.min.js"></script>

    <!-- call -->
    <script>
    ArticleEditor('#entry', {
        plugins: ['style'],
        css: ['/article-dist/arx-frame.min.css'],
        custom: {
            css: [
                'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital@0;1&display=swap',
                '/path-to/content.css'
            ]
        },
        styles: {
            paragraph: {
                lead: {
                    title: "Lead",
                    classname: 'lead'
                }
            },
            image: {
                leader: {
                    title: "Leader",
                    classname: 'leader'
                }
            }
        },
        grid: {
            gutter: '40px',
            overlay: false
        },
        image: {
            upload: '/upload-server-side-script/',
            select: '/path-to-images.json'
        }
    });
    </script>
</body>
</html>