How do I use placeholder?

1

I see in the documentation, it’s available from an extension. Do I have to explicitly add an extension? If so how do I do that? How do I set the placeholder for an individual instantiation of my codemirror? I don’t want to set the same placeholder text for different uses of cm. Thanks.

2

Assuming you’re talking about the 6.x interface, call placeholder to create the extension, and include it in the extensions option when you create your initial editor state.

1 Like
3

We’re using cm 5.60.0. Can I use placeholder in that version?

4

Yes, see the demo.

5

We currently import the codemirror library. From what i can gather looking at the demo html, I set the placeholder attribute of the textarea of my html. Then I also need to import the display/placeholder.js into my js. Then I use that textarea in the call CodeMirror.fromTextArea(textArea, editorSettings). Is that right?

6

Right, load the addon, and either use fromTextArea on a textarea with a placeholder attribute, or add the placeholder: “some string”` option to your CodeMirror configuration.

7

I’d like to set the style of the placeholder. When I have a css class say
.cm-placeholder::placeholder {
font-style: italic;
opacity: 0.5;|
}
and set class=“cm-placeholder” on my textarea, nothing happens.

8

This is not a native placeholder, so ::placeholder will definitely not affect it. Inspect the DOM with devtools and figure out what you want to style.

9

Actually styling worked for me after restarting browser. Thanks for all your help!