Я хочу получить экземпляр CodeMirror (привязан к текстовой области '#code'). Из события onclick я хочу добавить значение к текущему значению экземпляра CodeMirror. Как это можно достичь? Из документов я не могу найти ничего, чтобы получить экземпляр и связать его с loca var в javascript.
Получить экземпляр CodeMirror
Ответ 1
Кто-то просто отправил ответ, но удалил его. Тем не менее, это было рабочим решением. Спасибо!
- В основном это было его решение:
// 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.
Ответ 2
Другой метод, который я нашел в другом месте, заключается в следующем:
//Get a reference to the CodeMirror editor
var editor = document.querySelector('.CodeMirror').CodeMirror;
Это хорошо работает, когда вы динамически создаете экземпляр CodeMirror или заменяете существующий элемент DOM на экземпляр CodeMirror.
Ответ 3
Существует объект getWrapperElement
для редактора зеркал кода, который дает вам элемент DOM корня экземпляра зеркала кода:
var codemirrorDomElem = editor.getWrapperElement();
Ответ 4
Вы можете найти экземпляр, начинающийся с <textarea>
, и переход к следующему брату.
Native
-
Функциональные
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'
и просто добавьте codemirror
внутри объекта components
, после чего конфигурация в разделе data
:
codemirror_editor: undefined,
cm_editor_config: {
tabSize: 4,
mode: 'application/json',
theme: 'base16-dark',
lineNumbers: true,
// lineWrapping: true,
styleActiveSelected: true,
line: true,
}
и инициализировал объект в mounted
разделе жизненного цикла Vue
:
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...
Тогда редактор напрямую доступен для использования в других функциях