How to override the placeholder text color tinyMsc 6?

[jaspritt-hora]

Hi, I am new to TinyMce editor. I have integrated the editor with the default code snippet, provided on tinymce website. I want to override the placeholder color coming from the theme.

I have given the css in content_css. Like below

body#tinymce.mce-content-body::before:{ color: ${theme.palette.secondary.light} !important; }

But this doesn't have the desired effect.

How to go about it? I am using -

• tinyMce v6
• tinymce react plugin - v4.1.0

[tiny-james]

There is an option in tinymce for that:
https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#adding-placeholder-content-to-the-editor

Set it in the init prop:
https://codesandbox.io/s/placeholder-3k8xnk?file=/src/index.js

<Editor
      init={{
        placeholder: "This is a placeholder."
      }}
    />

[jaspritt-hora]

@tiny-james - Thank you! I wanted to override the placeholder text - color. I have done it through CSS by passing it in the body as, I am using the editor in classic mode i.e. inside the iframe

BTW, integrating the library was fun! Have a good one!

[jingliangjl]

Hi @tiny-james
I want to insert line break to the placeholder, and I have tried a few approaches but none worked (Such as
, \n, ).

Does TinyMCE provide a configuration to support this? If not, do you have any suggestions to implement it?

Thanks

I am using

• "@tinymce/tinymce-react": "^4.0.0",

[jingliangjl]

Seems like github editor has ignore the special char I sent in the above.
So adding more information about approaches I tried in here:


\n
<br />