CKEditor

how did you change your stylesheet?

check the samples

it's a shame the creator of this topic never replied to your response. I too am having the same issue.

I have looked everywhere... well I guess not everywhere since I'm here. But I can't find the place that is causing Times New Roman to be used as the default font in the editor.

My entire CSS for my website is using Arial, Verdana, Sans Serif.

In the fckeditor.css I see no reference for Times New Roman. I have checked all of the skins that are installed for fckeditor for Times New Roman. I've even searched for just Times. I can't find a reference anywhere. As the original poster mentioned, I can't find a reference for changing this in the fckconfig.js configuration.

I am using the Silver skin btw.

Here is what I have from the fckeditor.css

body, td
{
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
}

The above style was default. So again I am at a loss for where to fix this issue.

Here is an image of what fckeditor shows in the editor area when I type.



Your help is much appreciated. I love FCKeditor and I plan on using it alway. I just can't stand Times New Roman.

Thanks,

-neven

I modified the "body" tag of the fckeditor\editor\css\fck_editorarea.css file -- worked for me.

GerogeBeier has it right. And if you need to make the styling more dynamic you can change the location of the style sheet in the fckconfig.js file (maybe to something like fck_editorarea.css.php or fck_editorarea.css.asp)

Hi there,

thansk for your answers to this topic. I have a further question:

I want to declare "Verdana" as the only font ever used to display type in the dialog box of the fckeditor.
Especially when something is pasted into the dialog box from another programm. E.g.: You copy a text in word and paste it to FCK Editor.
Usually the Font used in Word is taken...

Can you help me?

Best regards,

Christian

Okay, so how does one change default font in CKEDITOR 3.0?...I've looked through the documentation and unless I'm overlooking something, this seems impossible. I don't see any declarations for font family or size in the css of the default skin. I've tried various settings in config without success.

Modifying fck_editorarea.css can change the text looked in the editor area. But what if I need to change the default style in the output html?

for example, open the editor and input 'abc' in the editor area, the html generated will be like:

<p>
abc
</p>

but what if I want it to be

<p style="font-size:48px">
abc
</p>

by default?

I'm using FCKEditor 2.5

yes I also want to change the output font, e.g. not the actual font of the editor but the font that is outputed to the html page. which files do i need to change

If you get an answer I'd love to know as I'nm having the same problem.

In fact I don't understand the thinking behind relying on a default font in the editor!
As soon as you move the generated code to a display page, or send it in an email, the displayed font will very likely differ from the editor's (Times New Roman) - not very WYSIWYG!

- Tim

This thread is quite old but maybe somebody still haven't got the solution. Here's what I did:

We can set text into the editor by

var myEditor = CKEDITOR.instances.editor1;
myEditor.setData('Testing 123');

From the editor, if u change the 'Testing 123' font to Verdana, the HTML output is

<span style="font-family:verdana,geneva,sans-serif;">Testing 123</span>

Using the same method, if we

myEditor.setData('<span style="font-family:verdana,geneva,sans-serif;">Testing 123</span>');

We'll have initial text of 'Testing 123' with Verdana. Clicking next to that text we can continue to edit in Verdana font. Right? But we don't want the 'Testing 123' as default text.

So replace the 'Testing 123' with empty character which is

myEditor.setData('<span style="font-family:verdana,geneva,sans-serif;">&shy;</span>');

Solution:
It took me quite a while to figure this out.
Let us say you want to use Verdana as the default font. Here is what you can do:

1. Open contents.css and change the font tag:
font-family: Verdana;

2. In the application/page where the output will be published, add this style:
<style>
.entry-content {font-family: Tahoma;}
</style>

That's it! Now you have change the default font successfully. This works for the font size as well. I just finished developing this question2answer site which utilizes CKEditor and this tiny issue kept me awake for two days!