How to apply theme css on admin editor?

Developer help
1

Is there any way to embed the theme CSS into the editor, so the styles will be applied also in the editor side and not only for the visitors?

Thanks.

2

I’ve been wanting this for a long time as well. A WYSIWYG editor that doesn’t incorporate your own site’s CSS is of limited value because the whole point is displaying what your page would look like without having to preview it, and without the correct CSS it can’t do that. The only work around is to inject your site’s CSS directly into the ghost css files. You might still have to do some finagling with the css to get it to work and override the default styling.

<your ghost blog directory>/versions/3.32.1/core/built/assets/ghost.min-<some long random string>.css

Note: every time you update ghost, you’ll have to re-edit the ghost.min css file associated with that new version, so make sure to save the changes you made and keep them handy. No need to restart ghost once the changes are made, just force reload the editor page (CTRL+F5) to ensure the changes are loaded.

3

But…the Ghost editor is not a WYSIWYG editor, is it? It’s not meant to be, as far as I understand?

4

Another option to inject CSS without changing the core files is to use a browser extension. For example, the CSS and Javascript Injection extension. I used this to convert the admin layout to be Right to Left.