it-swarm.com.de

Der Codemirror-Editor lädt den Inhalt erst, wenn Sie darauf klicken

Ich verwende Codemirror 2 und funktioniert einwandfrei, mit der Ausnahme, dass der gesetzte Wert des Editors nicht in den Editor geladen wird, bis ich auf den Editor klicke und er fokussiert wird. 

Ich möchte, dass der Editor den Inhalt von sich selbst anzeigt, ohne dass er angeklickt werden muss. Irgendwelche Ideen? 

Alle Codemirror-Demos funktionieren wie erwartet, also dachte ich mir, dass der Textbereich nicht fokussiert ist, also habe ich das auch versucht.

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

Sie müssen refresh () nach setValue () aufrufen. Sie müssen jedoch setTimeout verwenden, um die Aktualisierung () zu verschieben, nachdem CodeMirror/Browser das Layout gemäß dem neuen Inhalt aktualisiert hat: 

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

Es funktioniert gut für mich. Ich habe die Antwort in hier gefunden.

40
nvd_ai

Ich gehe davon aus, dass Sie (oder ein Skript, das Sie geladen haben) sich mit dem DOM so mischen, dass der Editor ausgeblendet ist oder sich an anderer Stelle in einer fremden Position befindet. Es wird ein Aufruf der refresh()-Methode erforderlich, nachdem sie sichtbar gemacht wurde.

26
Marijn

Nur für den Fall und für alle, die die Dokumentation nicht genau genug lesen (wie ich), aber darüber stolpern .. _. Dafür gibt es ein autorefresh-Addon .

Sie müssen autorefresh.js in Ihre Datei einfügen .___ Jetzt können Sie es so verwenden.

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

});

klappt wunderbar.

14
Vikash Saini

Ich verwende zufällig CodeMirror innerhalb einer Bootstrap-Registerkarte. Ich hatte den Verdacht, dass die Bootstrap-Registerkarten das Erscheinen des Registers verhinderten. Ich habe dies behoben, indem ich einfach die refresh()-Methode in der Show aufrief.

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

Etwas hat für mich funktioniert.

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

Die Version 5.14.2 von codemirror behebt dies vollständig mit einem Add-On. Siehe diese Antwort für Details.

2
Paul Whipp

Eine weitere Lösung (die ich auch erkannt habe, war, dass der Editor sichtbar sein musste, um ordnungsgemäß zu erstellen), das übergeordnete Element vorübergehend an das body-Element während der Konstruktion anhängen und dann nach Abschluss erneut anfügen.

Auf diese Weise müssen Sie sich nicht mit Elementen mischen oder sich um die Sichtbarkeit in vorhandenen Hierarchien sorgen, durch die Ihr Editor möglicherweise verschüttet wird.

In meinem Fall für processr.com habe ich mehrere verschachtelte Codebearbeitungselemente, die alle sofort erstellt werden müssen, wenn der Benutzer Aktualisierungen vornimmt. Daher mache ich Folgendes: 

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

Es funktioniert großartig und es ist bisher kein sichtbares Flimmern oder ähnliches zu sehen.

1
davestewart

Etwas hat für mich funktioniert! :)

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

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

Versuchen Sie, den Fokus auf dem DOM-Element anstelle des jQuery-Objekts aufzurufen.

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

verwenden Sie "Aktualisieren", um dieses Problem zu beheben. Aber es scheint nicht freundlich zu sein

0
牧云云

Ich arbeite mit reagieren, und all diese Antworten haben bei mir nicht funktioniert ... Nachdem ich die Dokumentation gelesen hatte, funktionierte das so:

im Konstruktor habe ich eine Instanz von Code Mirror initialisiert:

this.mirrorInstance = null;

und beim Öffnen der Registerkarte, die den codeEditor enthält, habe ich die Instanz nach 1 Millisekunde aktualisiert:

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

und hier ist der JSX-Code:

<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

Ich bin heute Abend selbst auf eine Version dieses Problems gestoßen.

In einigen anderen Beiträgen wird die Sichtbarkeit des übergeordneten Textbereichs als wichtig erachtet. Wenn er ausgeblendet ist, können Sie auf dieses Problem stoßen.

In meiner Situation waren die Form und die unmittelbare Umgebung in Ordnung, aber mein Backbone-Ansichtsmanager oberhalb der Renderkette war das Problem.

Mein Ansichtselement wird nicht auf dem DOM platziert, bis die Ansicht sich selbst vollständig dargestellt hat. Ich denke, ein Element, das nicht im DOM enthalten ist, wird als versteckt betrachtet oder einfach nicht behandelt.

Um dies zu umgehen, habe ich eine Post-Render-Phase (Pseudocode) hinzugefügt:

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

In postRender kann die Ansicht das tun, was sie benötigt, und zwar mit dem Wissen, dass der gesamte Inhalt jetzt auf dem Bildschirm angezeigt wird. Hier habe ich den CodeMirror verschoben und er hat gut funktioniert.

Dies kann auch ein Teil des Weges sein, um zu erklären, warum Probleme mit Popup-Elementen auftreten, da sie in einigen Fällen versuchen, den gesamten Inhalt vor der Anzeige zu erstellen.

Hoffe das hilft jemandem.

Toby

0
Toby Skinner