Redactor or another HTML editor that can inherit actual page styles?

Question

is it possible for Redactor or any of the other editors to actually inherit the styles from the (front end) page it is editing? My client has bootstrap columns etc and the pages have some elements with backgrounds and i wanted to make the content look more like the actual website they are editing rather than one long block of text.

I hacked around in the Redactor CSS files and i can kind of get it working by importing my sites stylesheets into the Redactor one but then that affects the whole Entry page's styles and also hacking in Redactors styles doesn't seem the best.

I do realise probably the best way to do this properly would be to create blocks for each type of content with Matrix (2 col or 1 col etc) and recreate all page elements but the site is coming from another system with lots of static pages and i just wanted my client to have a simple way to edit the existing content.

Anyone any ideas if this is possible at all?

Malcolm

Answer 1

The best solution I know of is to install the Control Panel CSS plugin. When you add the css you'll want to target the elements inside Redactor so you don't change the whole Craft CP. For example, add ".redactor-box " before any elements you need to style.

.redactor-box p {
    margin-bottom: 50px;
}