How do I keep my style consistent across stylesheets in Froala?

Question

I have a problem.

I am using Froala as a blogging tool for several of our companies websites. The problem is that when I start writing Froala text, it inherits its style directly from the website that it is in. For example, suppose my stylesheet is:

myStylesheet.css

p {
  color: red;
  font-family: comic-sans;
  text-size: 20px;
}

and on my main blog site, I will create the following in Froala:

<p>Hello World</p>

And Hello World will be red, comic-sans, and 20px because of the Stylesheet.

But what if I want to put this blog post on another website with a different stylesheet? How can I preserve the red, comic-sans, and 20px? Is there a way I can have Froala inline these things into the HTML?

Answer 1

There would be two approaches.

First approach: Froala Editor requires wrapping the output HTML with a <div class="fr-view">HTML_HERE</div>. Therefore, the best way would be to define those rules that you want to be preserved inside the .fr-view class:

.fr-view p {
    color: red;
    font-family: comic-sans;
    text-size: 20px;
}

Another approach: Disable the useClasses option and this way you'd get the style inline. If you do this, you wouldn't have to wrap the output with the fr-view class, but you would still need to define the CSS rules as explained above.