Codemirror editor ne charge pas le contenu avant d'avoir cliqué

Je m'attends à ce que vous (ou un script que vous avez chargé) vous mêliez du DOM de telle manière que l'éditeur soit caché ou dans une position étrange lorsqu'il est créé. Il aura besoin d'un appel à sa méthode refresh() après qu'il soit rendu visible.

juste au cas où, et pour tous ceux qui ne lisent pas la documentation assez attentivement (comme moi), mais trébuche sur ce. Il y a un autorefresh addon juste pour ça.

Vous devez ajouter autorefresh.js dans votre fichier. Maintenant, vous pouvez l'utiliser comme ça.

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

});

fonctionne comme un charme.

il se trouve que J'utilise CodeMirror dans un onglet bootstrap. J'ai soupçonné le bootstrap onglets étaient ce qui l'empêchait de montrer jusqu'a cliqué. J'ai corrigé cela en appelant simplement le refresh() la méthode.

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));

quelque chose a marché pour moi.

$(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);

        });

la version 5.14.2 de codemirror l'aborde entièrement avec un add on. Voir cette réponse pour plus de détails.

encore une autre solution (que j'ai également réalisé parce que l'éditeur devait être visible pour créer correctement) est de fixer temporairement l'élément parent à l'élément de corps pendant la construction, puis de rattacher une fois terminé.

de cette façon, vous n'avez pas besoin de vous mêler des éléments, ou de vous soucier de la visibilité dans les hiérarchies existantes que votre éditeur pourrait être enterré.

Dans mon cas, pour processr.com , j'ai plusieurs éléments d'édition de code imbriqués, qui doivent tous être créés à la volée lorsque l'utilisateur fait des mises à jour, donc je fais ce qui suit:

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

ça marche très bien, et il n'y a pas eu de clignotement visible ou quelque chose comme ça jusqu'à présent.

quelque chose a marché pour moi! :)

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

      setTimeout(function(){
        clearInterval(sh);  
      },2000)

essayez d'appeler focus sur L'élément DOM au lieu de l'objet jQuery.

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

j'ai moi-même rencontré une version de ce problème ce soir.

un certain nombre d'autres messages considèrent la visibilité du parent textarea comme étant importante, si elle est cachée, alors vous pouvez rencontrer ce problème.

dans ma situation la forme elle-même et l'environnement immédiat étaient bien, mais mon gestionnaire de vue de colonne vertébrale plus haut dans la chaîne de rendu était le problème.

mon élément de vue n'est pas placé sur le DOM jusqu'à la vue s'est rendu complètement, donc je suppose qu'un élément qui n'est pas sur le DOM est considéré comme caché ou tout simplement pas manipulé.

pour le contourner j'ai ajouté une phase de post-Rendu (pseudo-code):

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

dans posttrender la vue peut faire ce dont elle a besoin en sachant que tout le contenu est maintenant visible sur l'écran, c'est là que j'ai déplacé le CodeMirror et ça a bien fonctionné.

cela pourrait aussi expliquer en partie pourquoi on peut rencontrer des problèmes avec des choses comme les popups car dans certains cas, ils peuvent essayer de construire tout le contenu avant l'affichage.

Espère que ça aide quelqu'un.

Toby

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