Missing font tags on default ckeditor config

Question

I'm having a super annoying problem with CKEditor.

When I first load it, it appears like this:

then, when I click inside to type, it goes like this:

ok, everything just fine, but look what happens with the content when I type something:

I don't have any Arial 12 labeling, so when I get this HTML and process it, I'll never know it should be Arial 12.

Now, if I manually change it, then it works, but when I click outside the CKEditor window and then back inside again, it returns to the initial state, with no tags, look:

I've tried every solution on google, like adding

font-family: sans-serif, Arial, Verdana, "Trebuchet MS" !important; font-size: 12px !important; in content.css,

or adding

config.font_defaultLabel = 'Arial';
config.fontSize_defaultLabel = '12px';

in config.js, etc.

Could someone help me, please?

Answer 1

I think you misunderstood what config.font_defaultLabel, config.fontSize_defaultLabel do. They do only one thing - set the default labels in the dropdowns. Nothing more.

So how do you apply Arial 12px to the whole content? Using contents.css just like you did.

I don't have any Arial 12 labeling, so when I get this HTML and process it, I'll never know it should be Arial 12.

You just set it in the contents.css so I think you know that very well ;).

But I want <span> tags wrapping the whole content! (my quote :P)

CKEditor will not help with that, because this is against good practices. You should use power of CSS instead of dirtying your HTML with presentation markup.