Ace: Option zum Deaktivieren des Editors

Erstellt am 23. Mai 2011  ·  18Kommentare  ·  Quelle: ajaxorg/ace

Ähnlich wie das 'disabled'-Attribut eines Textbereichs.

er ähnelt dem ReadOnly-Modus, nur dass keine Benutzerinteraktion mit dem Editor zulässig ist. Der Cursor und alle Linienmarkierungen werden also ausgeblendet.
@gissues :{"order":73.29192546583863,"status":"backlog"}

Hilfreichster Kommentar

Ah, jetzt verstehe ich.
Aber wie viel der Editor-Funktionalität deaktiviert werden sollte, hängt vom genauen Anwendungsfall ab.
Ich denke, die Auswahl und die Fähigkeit, den Editor zu fokussieren, sollten in keinem dieser Fälle deaktiviert werden. Virtuelle Ansichtsfenster werden nützlich sein, um die Ausgabe anzuzeigen, aber die Browserauswahl kann damit nicht funktionieren. Und für Codebeispiele ist es normalerweise schön, ctrl+a ctrl+c tun zu können.

Zum Ausblenden von Cursor- und Linienhervorhebungen

editor.setOptions({
    readOnly: true,
    highlightActiveLine: false,
    highlightGutterLine: false
})
editor.renderer.$cursorLayer.element.style.opacity=0

um den Editor nicht tabierbar zu machen

editor.textInput.getElement().tabIndex=-1
 or
editor.textInput.getElement().disabled=true

um alle Verknüpfungen zu deaktivieren

editor.commands.commmandKeyBinding={}

Außerdem kann ich Destroy-Methoden für $mouseHandler und textInput hinzufügen, um sie vollständig zu deaktivieren

Alle 18 Kommentare

Wurde das irgendwo implementiert? Ich würde diese Funktion auch sehr nützlich finden.

Was ist der Anwendungsfall dafür? Ich möchte dies nicht zum Kern hinzufügen, da es selten verwendet wird und einfach zu implementieren ist

Etwas wie

editor.container.style.pointerEvents="none"
editor.container.style.opacity=0.5 // or use svg filter to make it gray
editor.renderer.setStyle("disabled", true)
editor.blur()

oder dieses

var cover = document.createElement("div")
editor.container.appendChild(cover)
cover.style.cssText = "position:absolute;\
top:0;bottom:0;right:0;left:0;\
background:rgba(150,150,150,0.5);\
z-index:100"
cover.addEventListener("mousedown", function(e){e.stopPropagation()}, true)

würde funktionieren.

Das Ziel ist nicht, es visuell deaktiviert aussehen zu lassen, das Ziel ist es, dem Benutzer die Möglichkeit zu nehmen, damit zu interagieren. Dh sie können den Cursor nicht steuern (noch besser, der Cursor existiert nicht).
Dies ist nur eine strengere Art von Nur-Lesen als "deaktiviert". Dies wäre praktisch, wenn Sie den Editor verwenden, um Codebeispiele oder Ausgaben von laufenden Programmen auf der Webseite anzuzeigen. Dies ist zwar nicht die ideale Verwendung für den Editor, aber seine Funktionen wie Syntaxhervorhebung und sein allgemein gutes Aussehen machen es zu einer attraktiven Option für solche Dinge.

Beide Codebeispiele erreichen dies nicht wirklich. Keiner von ihnen entfernt den Cursor, und obwohl sie den Benutzer ziemlich gut daran hindern, den Cursor zu steuern, kann der Fokus auf den Editor verschoben werden.

Ah, jetzt verstehe ich.
Aber wie viel der Editor-Funktionalität deaktiviert werden sollte, hängt vom genauen Anwendungsfall ab.
Ich denke, die Auswahl und die Fähigkeit, den Editor zu fokussieren, sollten in keinem dieser Fälle deaktiviert werden. Virtuelle Ansichtsfenster werden nützlich sein, um die Ausgabe anzuzeigen, aber die Browserauswahl kann damit nicht funktionieren. Und für Codebeispiele ist es normalerweise schön, ctrl+a ctrl+c tun zu können.

Zum Ausblenden von Cursor- und Linienhervorhebungen

editor.setOptions({
    readOnly: true,
    highlightActiveLine: false,
    highlightGutterLine: false
})
editor.renderer.$cursorLayer.element.style.opacity=0

um den Editor nicht tabierbar zu machen

editor.textInput.getElement().tabIndex=-1
 or
editor.textInput.getElement().disabled=true

um alle Verknüpfungen zu deaktivieren

editor.commands.commmandKeyBinding={}

Außerdem kann ich Destroy-Methoden für $mouseHandler und textInput hinzufügen, um sie vollständig zu deaktivieren

Ausgezeichnet, das hat die Wirkung, nach der ich gesucht habe. Ich stimme zu, dass die Anforderungen je nach Anwendungsfall unterschiedlich sind, aber es könnte praktisch sein, mehrere Optionen zu haben, um Dinge wie die Cursor oder die Verknüpfungen usw. zu deaktivieren.

Außerdem scheint die letzte Codezeile oben zu verhindern, dass der Editor überhaupt etwas anzeigt. :/

Außerdem scheint die letzte Codezeile oben zu verhindern, dass der Editor überhaupt etwas anzeigt. :/

meinst du editor.commands.commmandKeyBinding={} ? das wäre sehr merkwürdig

Danke dafür!

Danke, brauche definitiv eine Option, um den Editor zu deaktivieren!

Hallo, hast du den Zerstörer $mouseHandler implementiert? Ich bin ein bisschen verloren (Neuling hier). Oder gibt es eine Möglichkeit, es zu deaktivieren? Danke für die Deaktivierung des Editors übrigens :-)

@nightwing
editor.renderer.$cursorLayer.element.style.opacity=0
Es scheint, dass $cursorLayer jetzt kein Attribut von VirtualRenderer ist.
Ich möchte den Cursor ausblenden, wenn sich mein Editor im Zustand „ReadOnly“ befindet, und ich versuche die von Ihnen angegebene Methode, aber es funktioniert nicht, weil $cursorLayer kein Attribut von VirtualRenderer ist Cursor verstecken?

Ich habe festgestellt, dass es in VirtualRenderer zwei Methoden gibt, HideCursor() und SetCursorStyle(), und ich versuche, sie auf folgende Weise zu verwenden. Aber es funktioniert nicht so gut.
this._editor.renderer.hideCursor();
this._editor.renderer.setCursorStyle("Deckkraft: 0;");
Bin ich falsch in der Verwendung?

Ist es in Arbeit? Ich möchte den Editor deaktivieren, wenn der Fokus aus ihm heraus ist.

Hier gilt das gleiche! Ich würde gerne die Methode renderer.hideCursor() verwenden, aber es scheint nicht zu funktionieren. Ich habe versucht, es in meinem Editor-Init-Block und im changeCursor -Ereignis aufzurufen, aber ich kann es nicht zum Laufen bringen.

Wenn Sie den Cursor dennoch deaktivieren möchten, verwenden Sie die CSS3-Eigenschaft pointer-events: none; für das Editorelement.

Wie deaktiviere ich den Editor, immer noch nur ein neuer Entwickler? Bitte wäre für jede Hilfe dankbar

Wenn Sie den Cursor dennoch deaktivieren möchten, verwenden Sie die CSS3-Eigenschaft pointer-events: none; für das Editorelement.

Wie deaktiviert man den Editor?

Wenn Sie den Cursor dennoch deaktivieren möchten, verwenden Sie die CSS3-Eigenschaft pointer-events: none; für das Editorelement.

Wie deaktiviert man den Editor?

editor.setOptions({
    readOnly: true,
})

Lief wie am Schnürchen

Am Mittwoch, 23. September 2020, 22:27 Uhr Nehal Hasnayeen [email protected]
schrieb:

Für Leute, die den Cursor immer noch deaktivieren möchten, verwenden Sie die css3-Eigenschaft pointer-events:
keiner; auf dem Editor-Element.

Wie deaktiviert man den Editor?

editor.setOptions({
readOnly: wahr,
})


Sie erhalten dies, weil Sie kommentiert haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/ajaxorg/ace/issues/266#issuecomment-698073286 oder
Abmelden
https://github.com/notifications/unsubscribe-auth/ALIR2LMEV5BHDXPXO7RT5BTSHKVAPANCNFSM4AESJK3A
.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen