Article #3

This example shows how to connect your own styles for an article or any other content in Redactor. The styles will be isolated from the page styles thanks to the iframe mode.

Sed ut alterum esse ratione neque porro quisquam est, qui

Sed quia consequuntur magni

Ut placet, inquam tum dicere exorsus est cur nec voluptas assumenda est, omnis dolor sit sentiri haec ratio late patet in oculis quidem exercitus quid ex ea commodi consequatur? quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut summum bonum sit aut dolores suscipiantur maiorum.

Certe, inquam, pertinax non intellegamus, tu paulo ante cum soluta nobis est primum igitur, inquit, sic agam, ut aliquid ex eo ortum, tam inportuno tamque crudeli; sin, ut summo bono, dolorem aspernari ut et via procedat oratio quaerimus igitur, quid et benivole collegisti, nec voluptas.

Alii autem, quibus ego assentior, cum teneam sententiam, quid est et aut contra sit, aspernatur aut voluptates repudiandae sint et aut contra sit, amet, consectetur, adipisci velit, sed quia voluptas assumenda est, qui haec putat, ut summo bono, dolorem eum fugiat, quo pertineant non existimant.

Certe, inquam, pertinax non intellegamus, tu tam crudelis fuisse, nihil.

Quae fuerit causa, nollem me ab eo ortum

Quid ex eo delectu rerum, quem modo dixi, constituto, ut et aut reiciendis voluptatibus maiores alias consequatur aut officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut in armatum hostem impetum fecisse aut quid malum, sensu iudicari, sed ipsius honestatis decore laudandis, id omnia referri.

Hanc ego cum soluta nobis est primum igitur, quid est eligendi optio, cumque nihil impedit, quo aut fugiat aliquid, praeter voluptatem ipsam per se oratio, tua praesertim, qui officia deserunt mollitia animi, id omnia referri oporteat, ipsum per se texit, ne interiret at vero eos.

Sed ut de commodis suis cogitarent? at id ne ad naturam aut ad minima veniam, quis autem vel illum, qui haec ratio late patet in quo voluptas in armatum hostem impetum fecisse aut quid et harum quidem rerum facilis est eligendi optio, cumque nihil ut.

Code

<div id="entry-article-3">...</div>

<script src="/assets/redactor/plugins/block-class/block-class.js"></script>
<script src="/assets/redactor/plugins/alignment/alignment.js"></script>

const app = Redactor('#entry-article-3', {
    plugins: ['blockClass', 'alignment'],
    pathbar: true,
    css: '/assets/redactor/',
    classname: 'entry',
    padding: '50px',
    width: '700px',
    custom: {
        css: [
            'https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap',
            '/assets/css/articles/article-03.css'
        ]
    },
    image: {
        upload: '/endpoints/upload-image/',
        select: '/endpoints/images.json'
    }
});