【问题标题】：Get CodeMirror instance获取 CodeMirror 实例
【发布时间】：2012-07-20 14:37:47
【问题描述】：

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

【问题讨论】：

你能发布你目前所拥有的吗？
文档显示var myCodeMirror = CodeMirror(document.body);...是你想要的吗？

标签： javascript codemirror

【解决方案1】：

我找到的另一种方法elsewhere如下：

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

当您动态创建 CodeMirror 实例或用 CodeMirror 实例替换现有 DOM 元素时，这很有效。

【讨论】：

并且为了使用原始选择器而不是仅仅找到第一个 CodeMirror：var originalDiv = $('#code'); originalDiv.next('.CodeMirror')[0].CodeMirror;

【解决方案2】：

有人刚刚发布了答案但将其删除。尽管如此，这是一个可行的解决方案。谢谢！

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

// 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.

【讨论】：

这很聪明，但反之又如何呢？ CodeMirror 是否保存有关它链接到的元素的信息？
哦，刚刚找到：cm.getTextArea()。

【解决方案3】：

代码镜像编辑器对象上有一个getWrapperElement，它为您提供代码镜像实例的根 DOM 元素：

var codemirrorDomElem = editor.getWrapperElement();

【讨论】：

【解决方案4】：

您可以找到以<textarea> 开头并移动到下一个兄弟的实例。

原生

功能性

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

选择器

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

jQuery

功能性
```
$('#code').next('.CodeMirror').get(0),
```
选择器
```
$('#code + .CodeMirror').get(0)
```

额外：更高级的解决方案涉及clipboard.js -> JSFiddle Demo

示例

// Selector for textarea
var selector = '#code';

$(function() {
  var editor = CodeMirror.fromTextArea($(selector).get(0), {
    mode: 'javascript',
    theme: 'paraiso-dark',
    lineNumbers : true
  });
  editor.setSize(320, 240);
  editor.getDoc().setValue(JSON.stringify(getSampleData(), null, 4));
  
  $('#response').text(allEqual([
    document.querySelector(selector).nextSibling,        // Native - Functional
    document.querySelector(selector + ' + .CodeMirror'), // Native - Selector
    $(selector).next('.CodeMirror').get(0),              // jQuery - Functional
    $(selector + ' + .CodeMirror').get(0)                // jQuery - Selector
  ]));
});

function allEqual(arr) {
  return arr.every(function(current, index, all) {
    return current === all[(index + 1) % all.length];
  });
};

// Return sample JSON data.
function getSampleData() {
	return [
        { color: "red",     value: "#f00" },
        { color: "green",   value: "#0f0" },
        { color: "blue",    value: "#00f" }
    ];
}

#response { font-weight: bold; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/codemirror.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/theme/paraiso-dark.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/codemirror.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>All equal?: <span id="response"></span></div>
<textarea rows="10" cols="60" id="code"></textarea>

【讨论】：

【解决方案5】：

我正在使用Vue CLI 3、vue-codemirror 组件，如下所示：

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

导入codemirror 以在页面内使用：

import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'

只需在components 对象中添加codemirror，然后data 部分中的配置为：

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
}

希望这对很多人有帮助。

【讨论】：

【解决方案6】：

您可以简单地删除 var: 而不是

var editor = CodeMirror.fromTextArea...

只要有

editor = CodeMirror.fromTextArea...

那么editor就可以直接用于其他功能了

【讨论】：