How Can I Add Css Class To My Editable Element Using React-tinymce

I wanted to style me editable content box with predefined CSS, either by adding a Class name but I don't see any property that enables me to do that. There is a property body_class

Solution 1:

If you want to pass CSS into the editor so that it is used to style the content while editing you need to use either the content_css or content_style configuration options.

https://www.tiny.cloud/docs/configure/content-appearance/#content_csshttps://www.tiny.cloud/docs/configure/content-appearance/#content_style

The content_css is likely easier as it allows you to place the CSS in an external file and reference it via a URL.

Solution 2:

In React you can pass your style like you pass props. Here's a link for the documentation. But basically, you just write regular css, except for two-word properties. Those have to be written in camelCase. The link gives the example of background-color, has to be written backgroundColor as it is a JSX.