web-dev-qa-db-fra.com

L'éditeur Codemirror ne charge pas le contenu tant qu'il n'est pas cliqué

J'utilise codemirror 2 et son fonctionnement fonctionne correctement, à l'exception du fait que la valeur définie de l'éditeur ne se charge pas dans l'éditeur tant que je n'ai pas cliqué sur l'éditeur et qu'il est activé. 

Je veux que l'éditeur montre le contenu de lui-même sans avoir à cliquer dessus. Des idées? 

Toutes les démos codemirror fonctionnent comme prévu, donc je me suis dit que la zone de texte n'était pas centrée, alors j'ai aussi essayé.

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

Vous devez appeler refresh () après setValue (). Cependant, vous devez utiliser setTimeout pour reporter le rafraîchissement à () après que CodeMirror/Browser ait mis à jour la présentation en fonction du nouveau contenu: 

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

Cela fonctionne bien pour moi. J'ai trouvé la réponse dans ici .

40
nvd_ai

Je m'attends à ce que vous (ou un script que vous avez chargé) manipuliez le DOM de telle sorte que l'éditeur soit caché ou dans une position étrange lors de sa création. Il faudra un appel à sa méthode refresh() après l'avoir rendue visible.

26
Marijn

Juste au cas où, et pour tous ceux qui ne lisent pas la documentation avec suffisamment d'attention (comme moi), mais trébuchent sur ce point… .. Il y a un autorefresh addon rien que pour ça.

Vous devez ajouter autorefresh.js dans votre fichier . Vous pouvez maintenant l'utiliser comme ceci.

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

});

fonctionne comme un charme.

14
Vikash Saini

Il se trouve que j'utilise CodeMirror dans un onglet d'amorçage. Je soupçonnais que les onglets de bootstrap étaient ce qui l'empêchait de s'afficher jusqu'à ce que vous cliquiez. J'ai résolu ce problème en appelant simplement la méthode refresh() lors du spectacle.

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));
6
Yes Barry

Quelque chose a fonctionné 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);

        });
5
Jinu

La version 5.14.2 de codemirror résout tout cela avec un ajout. Voir cette réponse pour plus de détails.

2
Paul Whipp

Une autre solution (dont je me suis rendu compte également parce que l'éditeur avait besoin d'être visible pour créer correctement) consiste à attacher temporairement l'élément parent à l'élément body pendant la construction, puis à la rattacher une fois l'opération terminée.

De cette façon, vous n'avez pas besoin d'intervenir dans les éléments ni de vous inquiéter de la visibilité des hiérarchies existantes dans lesquelles 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 au fur et à mesure que l'utilisateur effectue les mises à jour. 

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

Cela fonctionne très bien et il n’ya pas eu de scintillement visible ou quelque chose du genre jusqu’à présent.

1
davestewart

Quelque chose a fonctionné pour moi! :)

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

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

Essayez d'appeler le focus sur l'élément DOM au lieu de l'objet jQuery.

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

l'aide de l'actualisation aide à résoudre ce problème. Mais cela ne semble pas amical

0
牧云云

Je travaille avec Réagir, et toutes ces réponses ne marchaient pas avec moi ... Après avoir lu la documentation, ça a marché comme ça:

dans le constructeur, j'ai initialisé une instance du code Mirror:

this.mirrorInstance = null;

et en ouvrant l'onglet contenant l'éditeur de code, j'ai actualisé l'instance après 1 millisecocnd:

toggleSubTab() {
    setTimeout(() => {
      this.mirrorInstance.refresh();
    }, 1);
  }

et voici le code JSX:

<CodeMirror
           value={this.state.codeEditor}
           options={{
           mode: "htmlmixed",
           theme: "default",
           lineNumbers: true,
           lineWrapping: true,
           autoRefresh: true
           }}
           editorDidMount={editor => {
           this.mirrorInstance = editor;
           }}
        />
0
Ammar Ismaeel
<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>
0
Koray Bayram

Je viens de tomber sur une version de ce problème moi-même ce soir.

Un certain nombre d’autres publications considèrent la visibilité du parent textarea comme un élément important. Si elle est masquée, vous pouvez rencontrer ce problème.

Dans ma situation, la forme elle-même et l'environnement immédiat étaient acceptables, mais le problème était celui de mon gestionnaire de vues Backbone situé plus haut dans la chaîne de rendu.

Mon élément de vue n'est pas placé sur le DOM tant que la vue ne s'est pas entièrement rendue. Je suppose donc qu'un élément ne figurant pas sur le DOM est considéré comme masqué ou simplement non géré.

Pour contourner le problème, j'ai ajouté une phase post-rendu (pseudocode):

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

Dans postRender, la vue peut faire ce dont elle a besoin en sachant que tout le contenu est maintenant visible à l'écran, c'est ici que j'ai déplacé le CodeMirror et que tout s'est bien passé.

Cela pourrait également expliquer en partie pourquoi on peut avoir des problèmes avec des éléments tels que les fenêtres contextuelles, car dans certains cas, ils peuvent essayer de créer tout le contenu avant de les afficher.

J'espère que ça aide quelqu'un.

Toby

0
Toby Skinner