Setting font-size and font-family in CKEditor
Question
I am working with ckeditor
I want to ask how can we set the font-family and font-size in this plugin, I have tried using
CKEDITOR.config.font_defaultLabel = 'Arial';
CKEDITOR.config.fontSize_defaultLabel = '12px';
but these commands just change the front-end (font name and size)
Whats the way out?
2 answers
solution1
2 2014-11-26 22:41:33
If you are using the classic editor , check the contents.css file in the root folder of CKEditor. You can change the styles, including fonts, for all HTML elements, also for the <body> element (the editing area).
Instead of modyfying the default config.css you may specify additional CSS files to be loaded with config.contentsCss , this will save you a headache with future upgrades. See Anna's comment.
solution2
2 ACCPTED 2014-11-27 07:47:01
The most future-proof method(1) is to override the default CSS styles for CKEditor content that you want to change in a separate file, added to your editor configuration through the config.contentsCss option.
See the working sample for this scenario in the CKEditor SDK: http://sdk.ckeditor.com/samples/classic.html
Scroll down to the "Classic Editor with Custom Styles" sample there; you can download the exact source code of this solution in the "Get Sample Source Code" section on the sample page. In this case the custom font and other styles were defined in a separate classic.css file which is then provided to the editor instance configuration with:
<script>
CKEDITOR.replace( 'myeditor', {
/* Default CKEditor styles are included as well to avoid copying default styles. */
contentsCss: [ 'contents.css', 'classic.css' ]
} );
</script>
Do remember that it is only valid for classic editor as in inline editor content styles are the same as the page styles , so all content styling comes directly from the page stylesheets.
(1) This method is better than modifying the default contents.css file because you don't risk overwriting your changes when you upgrade CKEditor .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.