How can I set the value of a CodeMirror editor using Javascript?

Question

I try to set id4 in the following code:

<div id="id1">
    <div id="id2">
        <div id="id3">
            <textarea id="id4"></textarea>
        </div>
    </div>
</div>

By using this code:

document.getElementById('id4').value = "...";

And this:

document.getElementById('id3').getElementsByTagName('textarea')[0].value = "...";

But nothing works.

UPDATED:

The textarea is replaced by CodeMirror editor. How do I set value to it?

Thanks a lot for the help!

Snaffle

Answer 1

The way to do this has changed slightly since the release of 3.0. It's now something like this:

var textArea = document.getElementById('myScript');
var editor = CodeMirror.fromTextArea(textArea);
editor.getDoc().setValue('var msg = "Hi";');

Differentiation

What is myScript? – Rafat

It's ID of the HTML element that you want turned into a CodeMirror editor. – Differentiation

How do I assign id tag to the Code Mirror in React? Just in case anybody knows. – Agatha

Not working with codemirror version 6 – Nineteenth

Answer 2

I like examples. Try this:

CodeMirror.fromTextArea(document.getElementById(id), {
        lineNumbers: true
    }).setValue("your code here");

Oteliaotero

Answer 3

As you said, the textarea is replaced by Codemirror. But it is replaced by an element with the class "CodeMirror". You can use querySelector to get the element. The current CodeMirror instance (and its methods) is attached to this element. So you can do:

document.querySelector('.CodeMirror').CodeMirror.setValue('VALUE')

Af

Answer 4

CodeMirror ~4.6.0 you can do this, assuming you have a codemirror object:

var currentValue = myCodeMirrorObject.cm.getValue();
var str = 'some new value';
myCodeMirrorObject.cm.setValue(str);

Heterologous

Answer 5

The code you have should work. The most likely explanation for it failing is that the elements do not exist at the time you run it. If so the solutions are to either:

• Move the JS so it appears after the elements have been created (e.g. to just before </body>)
• Delay execution of the JS until the elements have been created (e.g. by moving it to a function that you assign as the onload event handler)

Dixie

They exist! But id4 is powerfull editor - but in html code exactly what I wrote. – Snaffle

"A powerful editor"? That suggests you have already run some other JS that has replaced the textarea with some graphical widget. If so, you need to read the API documentation for that widget to find out how to change its value programatically. (This highlights the importance of providing a reduced test case that actually demonstrates the problem). – Dixie

How are you check that this script doesn't works? Did you check visual effect or check new textarea's value? – Kamp

The editor in browser is empty after command. Other textareas show set values. – Snaffle

@Altaveron - read quentin's answer closely - he's probably correct. Your script is in the wrong place. You need to move your script. – Heartsick

Answer 6

This has worked for my (pretty old) version of CodeMirror:

var editor=CodeMirror.fromTextArea('textarea_id');

editor.setCode('your string');

Camacho

Answer 7

editor.setValue("YOUR_VALUE");

Cresa