javascript - example - codemirror tabs

Obtener instancia de CodeMirror

Question

Quiero obtener una instancia de CodeMirror (está enlazada a un área de texto ''#code''). Desde un evento onclick, quiero agregar un valor al valor actual de la instancia de CodeMirror. ¿Cómo se puede lograr esto? De los documentos parece que no puedo encontrar nada para obtener una instancia y vincularlo a una loca var en javascript.

Answer 1

Alguien acaba de publicar una respuesta pero la eliminó. Sin embargo, fue una solución de trabajo. ¡Gracias!

- Básicamente esta fue su solución:

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

Hay un objeto getWrapperElement en el editor de duplicación de código que le da el elemento DOM raíz de la instancia de duplicación de código:

var codemirrorDomElem = editor.getWrapperElement();

Answer 3

Otro método que he encontrado en elsewhere es el siguiente:

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

Esto funciona bien cuando crea dinámicamente la instancia de CodeMirror o reemplaza un elemento DOM existente por una instancia de CodeMirror.

Answer 4

Puede encontrar la instancia comenzando con <textarea> y pasando al siguiente hermano.

Nativo

• Funcional

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

• Selector

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

jQuery

• Funcional

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

• Selector

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

Extra: una solución más avanzada que incluye clipboard.js -> JSFiddle Demo

Ejemplo

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

Simplemente puedes soltar la var : en lugar de tener

var editor = CodeMirror.fromTextArea...

Solo tengo

editor = CodeMirror.fromTextArea...

Entonces el editor está directamente disponible para usar en otras funciones