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!

score 77 · Accepted Answer · answered Jan 10 '14 at 22:05

77

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";');

answered Jan 10 '14 at 22:05

Ken Smith

20,305
15
100
147

1

What is **myScript**? – Avinash Dec 15 '15 at 10:04
1

It's ID of the HTML element that you want turned into a CodeMirror editor. – Ken Smith Dec 15 '15 at 14:25
How do I assign id tag to the Code Mirror in React? Just in case anybody knows. – Ankit Prajapati Feb 05 '20 at 21:04
Not working with codemirror version 6 – Богуслав Павлишинець Jan 20 '22 at 10:27

score 13 · Answer 2 · answered May 23 '12 at 08:10

13

I like examples. Try this:

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

answered May 23 '12 at 08:10

Mariz Melo

790
1
11
18

score 10 · Answer 3 · answered Jul 03 '20 at 08:42

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')

score 2 · Answer 4 · answered Apr 04 '15 at 23:09

2

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);

answered Apr 04 '15 at 23:09

random-forest-cat

33,652
11
120
99

score 1 · Answer 5 · answered Oct 05 '19 at 16:18

1

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

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

editor.setCode('your string');

answered Oct 05 '19 at 16:18

fcunited

171
5
17

Quentin · Answer 6 · 2011-12-04T21:37:48.893

1

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)

edited Dec 04 '11 at 21:37

answered Dec 04 '11 at 21:22

Quentin

914,110
126
1,211
1,335

They exist! But id4 is powerfull editor - but in html code exactly what I wrote. – Dmitry Dec 04 '11 at 21:23
5

"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). – Quentin Dec 04 '11 at 21:25
How are you check that this script doesn't works? Did you check visual effect or check new textarea's value? – Yuriy Rozhovetskiy Dec 04 '11 at 21:29
The editor in browser is empty after command. Other textareas show set values. – Dmitry Dec 04 '11 at 21:31
@Altaveron - read quentin's answer closely - he's probably correct. Your script is in the wrong place. You need to move your script. – Adam Rackis Dec 04 '11 at 21:36

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

UPDATED:

6 Answers6

Linked