CSS for the rich text editor

csamu · 2021-04-30T21:04:40.862Z

Hello
Is it possible to change the CSS for the Rich Text editor, i.e. the TinyMCE box. It seems to be inside an iframe.
I'm currently using 1.8.1

Regards,
Christoffer

andrejilderda · 2021-05-01T16:55:56.495Z

+1 for this. I found this is actually quite easy to implement by passing the content_style-property to tinymce.init.

@laurent Here's the diff. Let me know if it's ok to create a PR.

github.com

laurent22/joplin

re/dev...ajilderda:feature/add-tinymce-stylesheet

Joplin - an open source note taking and to-do application with synchronization capabilities for Windows, macOS, Linux, Android and iOS. Forum: https://discourse.joplinapp.org/

laurent · 2021-05-01T17:48:03.901Z

Rather than add a new stylesheet, couldn't we just load the existing one in TinyMCE? Then if you want to target the editor from the stylesheet, you just use the already existing "tox" prefixes.

Edit: And there's already a mechanism to load stylesheets in TinyMCE (in loadDocumentAssets) so I think that's what we should use instead of the content_style property.

andrejilderda · 2021-05-01T19:47:02.429Z

Ah, I wasn't aware of that. Even better. I've updated the branch so that it's now using the userstyle.css. Should I also change the settings label 'Custom stylesheet for rendered Markdown' to something along the lines of 'Custom stylesheet for rendered Markdown & TinyMCE-editor'?

laurent · 2021-05-01T20:35:14.454Z

Let's leave the setting description as it is, as changing it would invalidate all the translations, and in a sense it's rendered markdown in TinyMCE anyway except it's editable.

system · 2021-05-31T20:36:09.683Z

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.