Codemirror contenuto non visibile nel modal bootstrap fino a quando non viene cliccato

Sto usando codemirror 3 con bootstrap. Nel mio modal bootstrap, c'è una textarea, e la sto sostituendo con codemirror. Sto usando task_name_editor.setValue('initial value') per inizializzare un errore di codice con un input. Il problema è che il contenuto è lì, ma non è visibile finché non viene cliccato o premuto alcun tasto mentre è focalizzato.Codemirror contenuto non visibile nel modal bootstrap fino a quando non viene cliccato

ho cercato la risposta di Marijn a una domanda simile, ma non so dove collocare task_name_editor.refresh()

ho provato mettendolo in cui mostro il modal -

$('#edit_task_modal').modal('show'); 
task_name_editor.setValue('initial value'); 
task_name_editor.refresh();

anche allora, non è funzionante Per favore qualcuno può mostrare come risolvere questo problema?

fonte

2013-06-13 Parin Porecha

Va bene, ho trovato la soluzione - '$ ('# edit_task_modal'). modal ('show'); $ ('# edit_task_modal'). On ('mostrato', function() { task_name_editor.refresh()} ) ' Ma ancora, c'è un ritardo visibile quando CodeMirror è popolato dal contenuto. Se qualcuno ha un approccio migliore, si prega di condividere –

Questo è molto bello, grazie per la soluzione. – Neron

Sto riscontrando un problema simile per quanto riguarda il bootstrap in generale (non specificamente con le modali). Tuttavia, la mia soluzione era assicurarsi di aver creato l'editor codemirror il prima possibile (piuttosto che sull'evento pronto del documento). Sto indovinando che questo ha qualcosa a che fare con il modo in cui Bootstrap calcola le larghezze e le altezze nella griglia.

<body> 
    <!-- my page content --> 

    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> 

    <script type="text/javascript"> 
     // Create the code editor here rather than on document.ready 
     editor = CodeMirror(...); 
    </script> 
</body>

fonte

2013-11-21 12:50:16 pqvst

dove hai chiamato editor.refresh()? –

@ParinPorecha Non ho dovuto chiamare affatto l'aggiornamento in realtà – pqvst

Il mio problema è che ho l'editor nascosto dietro una scheda di bootstrap all'avvio, e che sembra nascondere il contenuto dell'editor fino a quando non apporto una modifica. Sfortunatamente, nessuna di queste due soluzioni ha funzionato per me, né creando l'editor ASAP, né chiamando refresh (né entrambi insieme). Ancora alla ricerca di un'altra soluzione ... –

ho avuto un problema molto simile con CodeMirror: se è stato inizializzato mentre non era la scheda bootstrap attivo, non avrebbe mostrato alcun contenuto. La mia soluzione alternativa era l'opposto di @pbergqvist - per inizializzare il controllo CodeMirror il più tardi possibile, cioè dopo aver selezionato la scheda in questione. Usando TypeScript, sembra un po 'come questo:

var tabClicked = $.Deferred(); 
$('#scriptTab').click(() => tabClicked.resolve()); 
$.ajax('/api/script') 
    .done(script => { 
     this.tabClicked.done(() => { 
      setTimeout(()=> { 
       var codeMirror = CodeMirror.fromTextArea($('#script')[0]); 
       codeMirror.getDoc().setValue(script); 
      }, 10); 
     }); 
    }) 
    .fail(err=> console.error('Error retrieving script: ' + JSON.stringify(err)));

Spero che questo aiuti qualcuno.

fonte

2014-01-10 21:10:25

Ho immaginato che abbia qualcosa a che fare con il cambiamento della dimensione della vista mentre le schede sono nascoste e mostrate di nuovo. Così i seguenti ha lavorato per me:

1) Ascoltare per i clic sulle schede 2) Al clic, chiamano refresh() su tutti gli editor cm o solo quello all'interno di una scheda, come si preferisce

è importante notare che refresh() deve essere chiamato con un breve timeout, altrimenti in alcuni browser (ho ottenuto questo in Chrome), l'editor viene visualizzato, ma con alcuni offset non validi.

provare qualcosa di simile:

$(document).ready(function() { 
    $("#your_nav_tabs a").click(function(e) { 
     if(window.codeMirrorInstances != null) { // window.codeMirrorInstances must be initialized and tracked manually 
      $.each(window.codeMirrorInstances, function(index, cm) { 
       setTimeout(function() { 
        cm.refresh(); 
       }, 100); 
      }); 
     } 

     return false; 
    }); 
});

fonte

2014-03-16 14:25:56 Denis

una soluzione più pulita, forse?

Le modal di avvio hanno un evento che si attiva dopo la visualizzazione della modale. In Bootstrap 3, questo è shown.bs.modal.

modal.on('shown.bs.modal', function() { 
    // initialize codemirror here 
});

fonte

2014-04-25 07:02:19 ncabral

Con l'aiuto di this question, sono stato in grado di ottenere un editor CodeMirror, che era seduto in una scheda inattiva bootstrap 3 e quindi non completamente inizializzato, e aggiornare quando la scheda viene cliccato. Forse qualcuno lo trova utile.versione

CoffeeScript:

$('a[data-toggle="tab"]').on 'shown.bs.tab', (e) -> 
    target = $(e.target).attr("href") # activated tab 
    $(target + ' .CodeMirror').each (i, el) -> 
    el.CodeMirror.refresh()

fonte

2014-05-24 14:11:36 Brett

(angolare, bootstrap) ho risolto con un semplice timeout, in questo modo:

<button class="btn btn-default pull-right margin" data-toggle="modal" data-target="#codesnippetmodal" ng-click="getcodesnippet(module)"> 
open modal 
</button>

e poi nel mio regolatore:

$scope.getcodesnippet = function(module) { 
    var clientmodule = { 
     clientid: $rootScope.activeclient.id, 
     moduleid: module.id 
    } 
    Data.post('getCodesnippet', { 
     clientmodule: clientmodule 
    }).then(function(results) { 

     codesnippet_editor.setValue(results.codesnippet); 
     setTimeout(function() { 
      codesnippet_editor.refresh(); 
     }, 500); 
    }); 
}

fonte

2015-01-11 14:12:00

Se si inizializza l'editor sull'evento mostrato modale, il problema verrà risolto. Basta mettere questo script sulla pagina madre.

$('#myModal').on('shown', function() { 
    CodeMirror.fromTextArea(document.getElementById('MyTextArea'), { mode: 'xml', lineNumbers: true }); 
});

fonte

2015-05-28 12:38:40

È ora possibile utilizzare il Codice Specchio addon Auto Refresh: https://codemirror.net/doc/manual.html#addon_autorefresh

Proprio includono la dipendenza sceneggiatura

<script src="../display/autorefresh.js" %}"></script>

che ora fornisce l'opzione "AutoRefresh" per aggiornamento automatico subito dopo aver visualizzato il contenuto.

var myCodeMirror = CodeMirror.fromTextArea(myTextArea,{ 
 
    autoRefresh: true, 
 
});

La documentazione affermano anche la sua un ritardo di 250 ms di tempo dopo che mostra il contenuto nascosto. È possibile aumentare tale ritardo se si sta caricando un sacco di contenuti.

fonte

2016-02-29 20:48:57 Josh

per evitare di essere aggiornato ogni volta (nel senso di posizione e cambiamenti perso) mi consiglia vivamente di utilizzare in questo modo:

$('#meinetabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
{ 
    if (var5 !=="5") 
     { 
      editor_htaccess.refresh(); 
     } 
    var5 = "5"; 
})

sua sotto licenza MIT perché io sono una persona così bella

fonte

2016-11-02 00:54:49

Codemirror contenuto non visibile nel modal bootstrap fino a quando non viene cliccato

risposta

Problemi correlati