Javascript 获取代码镜像实例

我想获得CodeMirror的一个实例（它绑定到一个textarea“#code”）。从onclick事件中，我想向CodeMirror实例的当前值添加一个值。如何做到这一点？从文档中，我似乎找不到任何东西来获取实例并将其绑定到javascript中的loca var。

有人刚刚发布了一个答案，但删除了它。然而，这是一个有效的解决办法。 谢谢

--基本上这就是他的解决方案：

// create an instance
var editor = CodeMirror.fromTextArea('code');
// store it
$('#code').data('CodeMirrorInstance', editor);
// get it
var myInstance = $('code').data('CodeMirrorInstance');
// from here on the API functions are available to 'myInstance' again.

---

我发现的另一种方法如下：

//Get a reference to the CodeMirror editor
var editor = document.querySelector('.CodeMirror').CodeMirror;

---

当您动态创建CodeMirror实例或用CodeMirror实例替换现有DOM元素时，这种方法非常有效。

您可以找到从

开始并移动到下一个同级的实例

土生土长的

• 功能性

  document.querySelector('#code').nextSibling,
  

  $('#code').next('.CodeMirror').get(0),
  

• 选择器

  document.querySelector('#code + .CodeMirror'),
  

  $('#code + .CodeMirror').get(0)
  

jQuery

• 功能性

  document.querySelector('#code').nextSibling,
  

  $('#code').next('.CodeMirror').get(0),
  

• 选择器

  document.querySelector('#code + .CodeMirror'),
  

  $('#code + .CodeMirror').get(0)
  

额外：更高级的解决方案，包括->

---

例子

//文本区域的选择器
变量选择器='#代码'；
$（函数（）{
var editor=CodeMirror.fromTextArea（$（选择器）.get（0）{
模式：“javascript”，
主题：“帕莱索黑暗”，
行号：对
});
编辑设置大小（320240）；
editor.getDoc（）.setValue（JSON.stringify（getSampleData（），null，4））；
$（“#响应”）.text（allEqual([
document.querySelector（selector）.nextSibling，//Native-Functional
document.querySelector（selector++.codemirr'），//Native-selector
$（选择器）.next（'.CodeMirror'）.get（0），//jQuery-Functional
$（选择器+'+.CodeMirror'）.get（0）//jQuery-selector
]));
});
函数allEqual（arr）{
返回arr.every（函数（当前、索引、全部）{
返回电流===all[（索引+1）%all.length]；
});
};
//返回示例JSON数据。
函数getSampleData（）{
返回[
{颜色：“红色”，值：#f00}，
{颜色：“绿色”，值：#0f0}，
{颜色：“蓝色”，值：#00f}
];
}

#响应{font-weight:bold；}

平等吗

在代码镜像编辑器对象上有一个

getWrapperElement

，它为您提供代码镜像实例的根DOM元素：

var codemirrorDomElem = editor.getWrapperElement();

---

您可以简单地删除变量：而不是

var editor = CodeMirror.fromTextArea...

只要

editor = CodeMirror.fromTextArea...

---

然后，编辑器可直接用于其他功能

我使用的

Vue CLI 3

，

Vue codemirror

组件如下：

<codemirror id="textarea_editor" v-model="textarea_input" :options="cm_editor_config"></codemirror>

只需在

组件

对象中添加

codemrror

，然后

数据

部分中的配置为：

codemirror_editor: undefined,
cm_editor_config: {
    tabSize: 4,
    mode: 'application/json',
    theme: 'base16-dark',
    lineNumbers: true,
    // lineWrapping: true,
    styleActiveSelected: true,
    line: true,
}

并在

Vue

的

mounted

生命周期部分初始化对象：

mounted () {
    if ( !this.codemirror_editor ) {
        this.codemirror_editor = $('#textarea_editor').find('.CodeMirror').get(0).CodeMirror;
    }
    // do something with this.codemirror_editor
}

---

希望这能对很多人有所帮助。

你能发布到目前为止你有什么吗？文档显示

var mycodeirror=codemirr（document.body）。。。这就是您想要的吗？为了使用原始选择器，而不仅仅是查找第一个CodeMirror:
var originalDiv=$（“#code”）；originalDiv.next（'.CodeMirror'）[0].CodeMirror这很聪明，但反过来又如何呢？CodeMirror是否保存有关它链接到的元素的信息？哦，刚刚找到：cm.getTextArea（）。