获取CodeMirror实例

Question

I want to get an instance of CodeMirror (it is binded to a textarea '#code'). From an onclick-event I want to add a value to the current value of the CodeMirror instance. How can this be achieved? From the docs I can't seem to find anything to get an instance and bind it to a loca var in javascript.

Answer 1

Another method I have found elsewhere is as follows:

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

This works well when you are creating the CodeMirror instance dynamically or replacing an existing DOM element with a CodeMirror instance.

Answer 2

Someone just posted an answer but removed it. Nevertheless, it was a working solution. Thanks!

-- Basically this was his solution:

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

Answer 3

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

var codemirrorDomElem = editor.getWrapperElement();

Answer 4

You can find the instance starting with the <textarea> and moving to the next sibling.

Native

• Functional

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

• Selector

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

jQuery

• Functional

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

• Selector

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

Extra: A more advanced solution involving clipboard.js -> JSFiddle Demo

---

Example

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

Answer 5

I am using with Vue CLI 3 , vue-codemirror component like this:

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

import codemirror to use within page:

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

and simply add codemirror inside components object, thereafter configuration in data section is:

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

and initialized the object in mounted lifecycle section of Vue :

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

Hope this would help many one.

Answer 6

You can simply drop the var : instead of having

var editor = CodeMirror.fromTextArea...

Just have

editor = CodeMirror.fromTextArea...

Then editor is directly available to use in other functions