I am using bootstrap-wysihtml5 in a website and need to customize the editor to match the look and feel of my website. For example, the bootstrap-wysihtml5 editor has a white background with black text, but I need to change it to, say, a red background with white text. I'd also like to use a different font.
If I use Fiddler to examine the <iframe> created by bootstrap-wysihtml5, I see that the <body> element in the <iframe> has the following style definition:
background-color: rgb(255, 255, 255);
color: rgb(44, 62, 80);
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 15px;
...
The font-family settings used here are defined in my bootstrap.css file, so I presume that's where the style definitions in the <iframe> are coming from, but I don't see how I can customize these to something different.
I've tried modifying the <iframe> <body> style via jQuery in the bootstrap-wysihtml5 load event, and that works, but as soon as I click on the editor the custom styling is overwritten with the default styling.
How do I implement my own custom styling in this editor?
Thanks
You can add your own stylesheets to the iframe by setting an option when creating the wysihtml5 area: