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

Posted 2023-05-07

【中文标题】如何使用 Javascript 设置 CodeMirror 编辑器的值？

【英文标题】：How can I set the value of a CodeMirror editor using Javascript?

【发布时间】：2012-01-12 19:14:26

【问题描述】：

我尝试在以下代码中设置id4：

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

通过使用此代码：

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

还有这个：

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

但没有任何效果。

更新：

textarea 被 CodeMirror 编辑器取代。如何为其设置价值？

非常感谢您的帮助！

【参考方案1】：

自 3.0 版本以来，执行此操作的方式略有变化。现在是这样的：

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

【讨论】：

什么是myScript？

它是您想要转换为 CodeMirror 编辑器的 html 元素的 ID。

如何在 React 中为代码镜像分配 id 标签？以防万一有人知道。

不适用于 codemirror 版本 6

【参考方案2】：

我喜欢例子。试试这个：

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

【参考方案3】：

如你所说，textarea 被 Codemirror 取代。但它被类“CodeMirror”的元素所取代。您可以使用querySelector 来获取元素。当前的 CodeMirror 实例（及其方法）附加到此元素。所以你可以这样做：

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

【参考方案4】：

CodeMirror ~4.6.0 你可以这样做，假设你有一个 codemirror 对象：

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

【参考方案5】：

您拥有的代码应该可以工作。它失败的最可能的解释是元素不存在在您运行它时。如果是这样，解决方案是：

移动 JS，使其在元素创建后出现（例如，在 </body> 之前） 延迟 JS 的执行直到元素被创建（例如，通过将其移动到您指定为 onload 事件处理程序的函数）

【讨论】：

他们存在！但 id4 是强大的编辑器 - 但在 html 代码中正是我写的。

“强大的编辑器”？这表明您已经运行了一些其他 JS，这些 JS 已经用一些图形小部件替换了 textarea。如果是这样，您需要阅读该小部件的 API 文档以了解如何以编程方式更改其值。 （这突出了提供实际演示问题的简化测试用例的重要性）。

你如何检查这个脚本不起作用？你检查了视觉效果还是检查了新文本区域的值？

命令后浏览器中的编辑器为空。其他文本区域显示设置值。

@Altaveron - 仔细阅读昆汀的回答 - 他可能是正确的。你的脚本放错地方了。您需要移动脚本。

【参考方案6】：

这适用于我的（相当旧的）CodeMirror 版本：

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

editor.setCode('your string');