CODEWITHSUNDEEP
javascriptckeditor
user10482595
user10482595

Reputation:

How Can i change default font of Ckeditor?

I like to change default font of Ckeditor !

I cant do it and dont see anything about it in Docs . I can only change the default lable of it !

Thanks

Upvotes: 0

Views: 5701

Answers (2)

Parsa Samandizadeh
Parsa Samandizadeh

Reputation: 594

In config.js:

config.contentsCss = '/ckeditor/fonts.css';
config.font_names = 'shabnam';

In fonts.css:

@font-face {
   font-family: "shabnam";
   src: url("/fonts/Shabnam.ttf") format('truetype');
}

Now, it may be all right. if you want this font to be styled with body tag, you should add this in fonts.css:

body {
  /* Font */
  font-family: "shabnam";
}

In order to change toolbar style, what worked for me was this:
In skins/moono-lisa/editor.css:

delete `font:normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;` from 
     `.cke_reset_all,.cke_reset_all *,.cke_reset_all a,.cke_reset_all textarea`

Upvotes: 0

Calvin Ellis
Calvin Ellis

Reputation: 297

Per the docs these all seem to be defined in plugins/font/plugin.js.

{Object} CKEDITOR.config.font_style The style definition to be used to apply the font in the text. Defined in: plugins/font/plugin.js.

config.font_style =
    {
        element		: 'span',
        styles		: { 'font-family' : '#(family)' },
        overrides	: [ { element : 'font', attributes : { 'face' : null } } ]
    };

{String} CKEDITOR.config.fontSize_defaultLabel Since: 3.0 The text to be displayed in the Font Size combo is none of the available values matches the current cursor position or text selection. Defined in: plugins/font/plugin.js.

config.fontSize_defaultLabel = '12px';

{String} CKEDITOR.config.fontSize_sizes Since: 3.0 The list of fonts size to be displayed in the Font Size combo in the toolbar. Entries are separated by semi-colons (;). Any kind of "CSS like" size can be used, like "12px", "2.3em", "130%", "larger" or "x-small". A display name may be optionally defined by prefixing the entries with the name and the slash character. For example, "Bigger Font/14px" will be displayed as "Bigger Font" in the list, but will be outputted as "14px". Defined in: plugins/font/plugin.js.

config.fontSize_sizes = '16/16px;24/24px;48/48px;';
config.fontSize_sizes = '12px;2.3em;130%;larger;x-small';
config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small';

I am not very savvy with Ckeditor, but I hope this helps!

Upvotes: 2

Related Questions