Edytor Codemirror nie ładuje zawartości do momentu kliknięcia

Spodziewam się, że ty (lub jakiś skrypt, który załadowałeś) mieszasz się z DOM w taki sposób, że Edytor jest ukryty lub w inny sposób w dziwnej pozycji podczas tworzenia. Wymaga wywołania swojej metody refresh() po jej uwidocznieniu.

Na wszelki wypadek i dla wszystkich, którzy nie czytają dokumentacji wystarczająco uważnie (jak ja), ale potykają się o to. Do tego jest autorefresh addon.

Musisz dodać autorefresh.js do swojego pliku. Teraz możesz go używać w ten sposób.

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

});

Zdarza mi się używać CodeMirror w zakładce bootstrap. Podejrzewałem, że zakładki bootstrap były tym, co uniemożliwiało wyświetlanie go do momentu kliknięcia. Naprawiłem to, po prostu wywołując metodę refresh() na pokazie.

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

Coś mi zadziałało.

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

        });

Wersja 5.14.2 codemirror rozwiązuje to w pełni za pomocą dodatku. Zobacz Ta odpowiedź Po szczegóły.

Jeszcze innym rozwiązaniem (które również zdałem sobie sprawę, ponieważ edytor musiał być widoczny, aby utworzyć poprawnie) jest tymczasowe dołączenie elementu nadrzędnego do elementu body podczas budowy, a następnie ponowne podłączenie po zakończeniu.

W ten sposób nie musisz mieszać się w elementy ani martwić się o widoczność w istniejących hierarchiach, które mogą być zakopane przez twój edytor.

W moim przypadku, dla processr.com , mam wiele zagnieżdżonych elementów edycji kodu, z których wszystkie muszą być tworzone w locie, jak użytkownik robi aktualizacje, więc robię następujące:

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

Coś mi się udało! :)

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

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

Spróbuj wywołać focus na elemencie DOM zamiast obiektu jQuery.

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

Właśnie natknąłem się na wersję tego problemu dziś wieczorem.

Wiele innych postów uważa widoczność rodzica textarea za ważną, jeśli jest ukryta, możesz napotkać ten problem.

W mojej sytuacji sama forma i najbliższe otoczenie były w porządku, ale mój menedżer widoku szkieletowego wyżej w łańcuchu renderowania był problemem.

Mój element widoku nie jest umieszczony na DOM, dopóki Widok Nie wyrenderuje się w pełni, więc domyślam się, że element nie jest na DOM jest uważany za ukryty lub po prostu nie obsługiwany.

Aby to obejść dodałem fazę Post-render (pseudocode):

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

W postrenderze Widok może zrobić to, czego potrzebuje wiedząc, że cała zawartość jest teraz widoczna na ekranie, tutaj przeniosłem CodeMirror i działało dobrze.

Może to również wyjaśnić, dlaczego można napotkać problemy z takimi rzeczami, jak wyskakujące okienka, ponieważ w niektórych przypadkach mogą próbować zbudować całą zawartość przed wyświetlanie.

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>