javascript - online - El editor de Codemirror no carga contenido hasta que se hace clic

codemirror tabs

Question

Estoy usando codemirror 2 y está funcionando bien, excepto que el valor establecido del editor no se carga en el editor hasta que hago clic en el editor y se enfoca.

Quiero que el editor muestre el contenido de sí mismo sin tener que hacer clic en él. ¿Algunas ideas?

Todas las demostraciones de Codemirror funcionan como se esperaba, así que pensé que tal vez el área de texto no estaba enfocada, así que también lo intenté.

$("#editor").focus();
var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
mode: "text/html",
height: "197px",
lineNumbers: true
});

Answer 1

¡Algo funcionó para mí! :)

 var sh = setInterval(function() {
agentConfigEditor.refresh();
}, 500);
setTimeout(function(){
clearInterval(sh);
},2000)

Answer 2

Acabo de encontrar una versión de este problema yo mismo esta noche.

Un número de otras publicaciones consideran que la visibilidad del área de texto principal es importante, si está oculta, entonces puede tener este problema.

En mi situación, la forma en sí misma y el entorno inmediato estaban bien, pero mi administrador de vista Backbone más arriba en la cadena de representación era el problema.

Mi elemento de vista no se coloca en el DOM hasta que la vista se haya procesado completamente, por lo que supongo que un elemento que no está en el DOM se considera oculto o simplemente no se maneja.

Para evitarlo, agregué una fase de post-render (pseudocódigo):

view.render();
$(''body'').html(view.el);
view.postRender();

En postRender, la vista puede hacer lo que necesita sabiendo que todo el contenido ahora está visible en la pantalla, aquí es donde moví el CodeMirror y funcionó bien.

Esto también podría explicar en parte la razón por la que uno puede tener problemas con elementos como ventanas emergentes, ya que en algunos casos pueden intentar compilar todo el contenido antes de mostrarlo.

Espero que ayude a alguien.

Toby

Answer 3

Algo funcionó para mí.

$(document).ready(function(){
var editor = CodeMirror.fromTextArea(document.getElementById("code2"), {
//lineNumbers: true,
readOnly: true,
autofocus: true,
matchBrackets: true,
styleActiveLine: true
});
setTimeout(function() {
editor.refresh();
}, 100);
});

Answer 4

Debe llamar a refresh () después de setValue (). Sin embargo, debe usar setTimeout para posponer la actualización () después de que CodeMirror / Browser haya actualizado el diseño de acuerdo con el nuevo contenido:

this.codeMirrorInstance.setValue(content);
var that = this;
setTimeout(function() {
that.codeMirrorInstance.refresh();
},1);

Funciona bien para mi Encontré la respuesta here .

Answer 5

Espero que usted (o algún script que haya cargado) esté entrometiéndose con el DOM de tal manera que el editor esté oculto o se encuentre en una posición extraña cuando se crea. Requerirá una llamada a su método refresh() vez que se haga visible.

Answer 6

Intente llamar al foco en el elemento DOM en lugar del objeto jQuery.

var editor=$( ''#editor'' );
editor[0].focus();
// or
document.getElementById( ''editor'' ).focus();

Answer 7

La versión 5.14.2 de codemirror aborda esto completamente con un complemento. Vea esta respuesta para más detalles.

Answer 8

Otra solución (que también me di cuenta de que el editor tenía que ser visible para crear correctamente) es adjuntar temporalmente el elemento padre al elemento del cuerpo durante la construcción, y luego volver a adjuntarlo una vez que esté completo.

De esta manera, no necesita entrometerse con elementos, o preocuparse por la visibilidad en las jerarquías existentes en las que su editor podría estar enterrado.

En mi caso, para processr.com , tengo múltiples elementos de edición de código anidados, todos los cuales deben crearse sobre la marcha a medida que el usuario realiza actualizaciones, por lo que hago lo siguiente:

this.$elements.appendTo(''body'');
for (var i = 0; i < data.length; i++)
{
this.addElement(data[i]);
}
this.$elements.appendTo(this.$view);

Funciona muy bien, y no ha habido parpadeo visible ni nada de eso hasta ahora.

Answer 9

Por si acaso, y para todos los que no leen la documentación con suficiente atención (como yo), pero se topa con esto. Hay un complemento autorefresh solo para eso.

autorefresh.js agregar autorefresh.js en su archivo. Ahora puedes usarlo así.

var editor = CodeMirror.fromTextArea(document.getElementById("id_commentsHint"), {
mode: "javascript",
autoRefresh:true,
lineNumbers: false,
lineWrapping: true,
});

Funciona de maravilla.

Answer 10

Resulta que estoy usando CodeMirror dentro de una pestaña de arranque. Sospeché que las pestañas de arranque eran lo que impedía que apareciera hasta que se hacía clic. Arreglé esto simplemente llamando al método refresh() en el programa.

var cmInstance = CodeMirror.fromTextArea(document.getElementById(''cm''), {
lineNumbers: true,
lineWrapping: true,
indentUnit: 4,
mode: ''css''
});
// to fix code mirror not showing up until clicked
$(document).on(''shown.bs.tab'', ''a[data-toggle="tab"]'', function() {
this.refresh();
}.bind(cmInstance));

Answer 11

<div class="tabbable-line">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tabXml1" data-toggle="tab" aria-expanded="true">Xml 1</a>
</li>
<li class="">
<a href="#tabXml2" id="xmlTab2Header" data-toggle="tab" aria-expanded="true">Xml 2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabXml1">
<textarea id="txtXml1" />
</div>
<div class="tab-pane" id="tabXml2">
<textarea id="txtXml2" />
</div>
</div>
</div>
<link rel="stylesheet" href="~/Content/codemirror.min.css">
<style type="text/css">
.CodeMirror {
border: 1px solid #eee;
max-width: 100%;
height: 400px;
}
</style>
<script src="~/Scripts/codemirror.min.js"></script>
<script src="~/Scripts/codemirror.xml.min.js"></script>
<script>
$(document).ready(function () {
var cmXml1;
var cmXml2;
cmXml1 = CodeMirror.fromTextArea(document.getElementById("txtXml1"), {
mode: "xml",
lineNumbers: true
});
cmXml2 = CodeMirror.fromTextArea(document.getElementById("txtXml2"), {
mode: "xml",
lineNumbers: true
});
// Refresh code mirror element when tab header is clicked.
$("#xmlTab2Header").click(function () {
setTimeout(function () {
cmXml2.refresh();
}, 10);
});
});
</script>