L’éditeur de Codemirror ne charge pas le contenu avant d’avoir cliqué

Vous devez appeler refresh () après setValue (). Cependant, vous devez utiliser setTimeout pour reporter l’actualisation () après que CodeMirror / Browser a mis à jour la mise en page 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 ici .

Je pense que vous (ou un script que vous avez chargé) est en train de se mêler au DOM de telle manière que l’éditeur soit caché ou autrement dans une position étrange lors de sa création. Il faudra appeler la méthode refresh() après l’avoir rendue visible.

Juste au cas où, et pour tous ceux qui ne lisent pas la documentation avec suffisamment d’attention (comme moi), mais trébuchent à ce sujet. Il y a un addon d’actualisation juste pour ça.

Vous devez append 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.

Je suis en train d’utiliser CodeMirror dans un onglet bootstrap. Je soupçonnais que les tabs bootstrap étaient ce qui l’empêchait d’apparaître jusqu’à ce que l’on clique dessus. J’ai résolu ce problème en appelant simplement la méthode refresh() lors de l’exposition.

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

La version 5.14.2 de codemirror corrige cela complètement avec un ajout. 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) consiste à attacher temporairement l’élément parent à l’élément body pendant la construction, puis à le rattacher une fois terminé.

De cette façon, vous n’avez pas besoin de manipuler 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 nesteds, qui doivent tous être créés à la volée lorsque l’utilisateur effectue des mises à jour. Je fais donc ce qui suit:

 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'y a pas eu de scintillement visible ou quelque chose comme ça jusqu'à présent.

Quelque chose a fonctionné 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’object jQuery.

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

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

Un certain nombre d’autres publications considèrent que la visibilité du parent textarea est importante, si elle est cachée, vous pouvez rencontrer ce problème.

Dans ma situation, la forme elle-même et les environs immédiats étaient bien, mais le problème était mon gestionnaire de vue Backbone plus haut dans la chaîne de rendu.

Mon élément view n’est pas placé sur le DOM tant que la vue ne s’est pas complètement rendue, donc je suppose qu’un élément qui n’est pas sur le DOM est considéré comme caché ou simplement non géré.

Pour le contourner, j’ai ajouté une phase de 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 là que j’ai déplacé le CodeMirror et ça a bien fonctionné.

Cela pourrait également expliquer en partie pourquoi on peut rencontrer des problèmes avec des popups, car dans certains cas, ils peuvent essayer de générer tout le contenu avant de l’afficher.

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

Toby

 
 
 
 Xml 1 
 
 Xml 2