JavaScript-Implementierung der Syntax des Eingabefeld-Editors, die Ideen und Codedetails hervorhebt

Das Textarea-Element wird häufig in Web-IDEs verwendet. Normalerweise kann der mit der Website gelieferte Textbereichseditor unsere Anforderungen nicht erfüllen. Als Entwickler müssen wir den Code häufig online bearbeiten, hervorheben usw. Daher können wir durch andere Open-Source-Projekte einige praktische Funktionen hinzufügen In diesem Artikel wird die JavaScript-Bibliothek ACE verwendet, um einen Eingabefeldeffekt zu erzeugen. Dies ist ein vollständig Open-Source-Skript. Mit diesem Skript können Entwickler Eingabefelder erstellen, die Syntaxhervorhebung unterstützen. Anschließend können Sie den Code an einer beliebigen Stelle auf der Website einbetten.

Laden Sie die Bibliothek herunter. Zuerst müssen wir den ACE-Code von Github herunterladen. Entpacken Sie es nach dem Herunterladen und fügen Sie die js-Datei in Ihren Header-Bereich ein.

<script src="src-min/ace.js" type="text/javascript" charset="utf-8"></script>

Fügen Sie den Code zum Editor hinzu.

Setzen Sie zuerst ein p mit der ID des Editors ein und rufen Sie dann ace.edit auf Der Code der script()-Methode lautet wie folgt:

var editor = ace.edit("editor"); 
editor.getSession().setMode("ace/mode/javascript");

Der Einfachheit halber habe ich den Var-Editor als Variable definiert. Sie können den Var-Demoeditor auch als Variable definieren. In der zweiten Zeile wird angegeben, welche Art von Sprachhervorhebung verwendet werden soll. Sie können zusätzliche Sprachsammlungen aus dem src-Verzeichnis auswählen. Hier ist eine Sammlung unterstützter Sprachen:

SQL
Ruby
SASS
PHP
Objectivec
Csharp
Java
JSON
Zusätzliche Parameter verwenden

editor.setTheme("ace/theme/dawn"); 
editor.getSession().setTabSize(2); 
editor.getSession().setUseWrapMode(true);

In diesen drei Codezeilen geht es um Texteingabeeffekte. Die erste Zeile ändert die Standardsyntaxfarbe und das Design des Codes. Es gibt Dutzende neuer im src-Verzeichnis. Themen, aus denen Sie wählen können
Bei den anderen beiden Optionen geht es um die Benutzererfahrung. Normalerweise werden durch Drücken der Tabulatortaste 4 Leerzeichen eingegeben. Außerdem wird der Text standardmäßig nicht automatisch umbrochen, sondern eine horizontale Bildlaufleiste angehängt . . Aber mit dieser Methode setUseWrapMode(true) können wir das Problem des Zeilenumbruchs beheben.
Es gibt noch einige andere Befehle, die Sie dem ACE-Assistenten entnehmen können. Dazu gehört das Ändern der Cursorposition, das dynamische Hinzufügen neuer Inhalte oder das Kopieren von Text.

CSS-Code

#editor { 
margin-left: 15px; 
margin-top: 15px; 
width: 1000px; 
height: 400px; 
}

Das obige ist der detaillierte Inhalt vonJavaScript-Implementierung der Syntax des Eingabefeld-Editors, die Ideen und Codedetails hervorhebt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!