Pobierz instancję CodeMirror

Chcę uzyskać instancję CodeMirror (jest ona przypisana do obszaru tekstowego '# code'). Z zdarzenia onclick chcę dodać wartość do bieżącej wartości instancji CodeMirror. Jak można to osiągnąć? Z dokumentów nie mogę znaleźć nic, aby uzyskać instancję i powiązać ją z Loca var w javascript.

Author: Ben, 2012-07-20
Source

5 answers

Inna metoda, którą znalazłem gdzie indziej jest następująca: 

//Get a reference to the CodeMirror editor
var editor = $('.CodeMirror')[0].CodeMirror;

Działa to dobrze, gdy tworzysz instancję CodeMirror dynamicznie lub zastępujesz istniejący element DOM instancją CodeMirror.

 41
Author: ashatte,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-28 02:05:04

Ktoś właśnie opublikował odpowiedź, ale ją usunął. Mimo to było to rozwiązanie robocze. Dzięki!

-- W Zasadzie to było jego rozwiązanie: 

// 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.
 11
Author: Ben,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-20 15:01:30

Istnieje getWrapperElement na obiektach edytora lustrzanego kodu, który daje główny element DOM instancji lustrzanej kodu: 

var codemirrorDomElem = editor.getWrapperElement();
 6
Author: Alireza Mirian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-10 12:38:42

Można znaleźć instancję zaczynającą się od <textarea> i przechodzącą do następnego rodzeństwa.

Native

  • Funkcjonalne 

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

  • Selektor 

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

JQuery

  • Funkcjonalne 

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

  • Selektor 

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

Extra: bardziej zaawansowane rozwiązanie obejmujące Schowek.js -> JSFiddle Demo

Przykład 

// 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>
 1
Author: Mr. Polywhirl,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-17 02:30:43

Możesz po prostu upuścić var : zamiast 

var editor = CodeMirror.fromTextArea...

Just have 

editor = CodeMirror.fromTextArea...

Następnie edytor jest bezpośrednio dostępny do użycia w innych funkcjach

 0
Author: Enigma Plus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-07 15:21:18