Inherit page styles

This example shows how to make Redactor inherit page styles to display content. For a better demonstration, we surrounded the editor with a container with the specified styles it will inherit.

Weekend in the City

With nostyle: true, Redactor does not add the default rx-content class, so headings, paragraphs, and figures follow the page CSS.

Edit the text below and compare typography with the styles defined on the surrounding container.

Code

<div class="nostyle-demo">
    <div id="entry">
        <h1>Weekend in the City</h1>
        <figure>
            <img src="/uploads/photo.jpg" alt="City view">
        </figure>
        <p>With <code>nostyle: true</code>, Redactor does not add the default <code>rx-content</code> class.</p>
        <p>Edit the text below and compare typography with the page CSS.</p>
    </div>
</div>

.nostyle-demo {
    font-family: Georgia;
}

.nostyle-demo h1 {
    font-size: 32px;
    margin-bottom: 16px;
}

.nostyle-demo figure {
    margin-bottom: 24px;
}

.nostyle-demo p {
    font-size: 18px;
    margin: 16px 0;
}

const app = Redactor('#entry', {
    nostyle: true
});