Get CodeMirror instance

user_213633 0
Viewed 25300

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.

codemirror javascript
6 Answers

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.

user_39023390

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

user_10497920
Related