Article #5

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.

Code

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

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