Forum

Thread tagged as: Question, Problem, CKEditor

CKeditor - font sizing in editor window

Is it possible to change how the text looks in the editor window? For example, normal paragraph text shows fine but h5 text appears smaller than the normal text even though on the website it appears larger and bolder correctly as per the site stylesheet.

I find myself explaining to clients that the font size shown in the editor has no bearing on how it will look on the website just so long as they select the headings correctly in the editor, but it does confuse them.

Here is a screenshot of what I mean:

https://www.evernote.com/l/Ai_0ORHQY_FFWqN-utuNq6O5CbdpkLqLwgc You can see h5 is smaller than the normal text when ideally it should appear larger and bolder.
Neil Duddridge

Neil Duddridge 1 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

This is one of the many reasons Markdown is a good idea. It doesn't make promises it can't keep.

I believe you can customise the CSS that CKEditor uses, yes. You'd need to check the CKEditor documentation for that, but I'm sure you can do it.
Neil Duddridge

Neil Duddridge 1 points

4 years ago

I'd love to switch clients to Markdown but I get a look of like 'what the hell' when I've tried to show and explain :D
Richard Terrick

Richard Terrick 3 points

4 years ago

Hey Neil – it's the contents.css file you want to modify:

www.example.com/perch/addons/plugins/editors/ckeditor/contents.css

I personally edit this file for nearly every project to make small changes to things like link colour, blockquotes, heading size/styles, etc. to roughly correlate what CKEditor displays and the actual output.

You can also edit config.js, located in the same directory, to edit the toolbar itself, including what options the editor has in the "Headings" and "Style" drop-down menus. This way you can take away the options you don't want your editor to use (for example, I don't want them to choose an H1 if it's explicitly in the Perch template already).

It's worth noting that CKEditor can get stuck firmly in the cache, so you can make changes all day long that never appear to "do" anything in the Perch admin area. I find Chrome in particular holds on to the cache for ages. The best way I have found around it is to set the "Disable cache (while DevTools is open)" checkbox in Chrome's Developer Tools area.

  1. Open Chrome Developer Tools (On Mac it's View > Developer > Developer Tools)
  2. Click the icon that's three vertical dots in the upper right and choose "Settings"
  3. Under the "Network" heading, check "Disable cache (while DevTools is open)

Then when you're viewing the Perch admin area, open DevTools and reload the page. That will force the updated contents.css file to load properly.

Hope that helps!
Neil Duddridge

Neil Duddridge 1 points

4 years ago

Thanks for the detail Richard much appreciated. I normally modify the config.js file and yeah I use Chrome and experience the same regards the caching, drives me crazy! Seems we are similar wavelengths with what to exclude from clients in the editor :)

I will modify the contents.css from now on!