CODEWITHSUNDEEP
javascriptcodemirror
Norbert Hüthmayr
Norbert Hüthmayr

Reputation: 515

Change CodeMirror Placeholder via JS

I'm using CodeMirror version 5.51 along with the placeholder addon. The placeholder itself is set like this.

<textarea id="code" class="hidden" placeholder="Paste your XML here..."></textarea>

When the user now changes the website's language, I would like to change the placeholder's text as well.

I've tried setting the placeholder directly

this.$editor.options.placeholder = "New value"

but this does not take effect immediately.

Is there a way to

  1. Specify a function that returns the string instead of a string directly?
  2. Re-initialize the placeholder through a function call?

The addon's code suggest that you can use something else than a string but I could not find more information on that subject.

Upvotes: 1

Views: 2195

Answers (2)

Terry
Terry

Reputation: 66103

You can use the cm.setOption() method to programmatically update the placeholder text, i.e.:

this.$editor.setOption('placeholder', 'New value');

Here is a proof-of-concept example:

const editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true
});

document.getElementById('update-placeholder-text').addEventListener('click', () => {
  editor.setOption('placeholder', document.getElementById('placeholder-text').value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/codemirror.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/addon/display/placeholder.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/codemirror.min.css" rel="stylesheet" />

<input type="text" id="placeholder-text" value="Lorem ipsum" /><button id="update-placeholder-text">Update placeholder text</button>
<hr />
<textarea id="code" name="code" placeholder="Code goes here..."></textarea>

Upvotes: 3

Norbert H&#252;thmayr
Norbert H&#252;thmayr

Reputation: 515

After a little while of tinkering, I found that the following two lines do the trick.

The first line internally sets the new value while the second one (obviously) overrides the current UI representation.

this.$editor.options.placeholder = "Value";
this.$editor.state.placeholder.innerText = "Value";

The first line (I assume) is equal to what @Terry suggested.

this.$editor.setOptions('placeholder', 'New value');

Upvotes: 0

Related Questions