如何使用 Javascript 设置 CodeMirror 编辑器的值？

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!

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

Answer 2

I like examples. Try this:

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

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

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

Answer 5

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

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

editor.setCode('your string');

Answer 6

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 (eg to just before </body> )
• Delay execution of the JS until the elements have been created (eg by moving it to a function that you assign as the onload event handler)