Implémentation JavaScript de la syntaxe de l'éditeur de zone de saisie mettant en évidence les idées et les détails du code

L'élément textarea a été largement utilisé dans les IDE Web. Habituellement, l'éditeur de zone de texte fourni avec le site Web ne peut pas répondre à nos besoins. En tant que développeur, nous devons souvent éditer du code en ligne, surligner du code, etc. Par conséquent, grâce à d'autres projets open source, nous pouvons ajouter quelques fonctions pratiques dans cet article. la bibliothèque JavaScript ACE sera utilisée pour créer un effet de zone de saisie. Il s'agit d'un script entièrement open source. Ce script permet aux développeurs de créer des zones de saisie prenant en charge la coloration syntaxique. Ensuite, vous pouvez intégrer le code n'importe où sur le site Web

Téléchargez la bibliothèque Nous devons d'abord télécharger le code ACE depuis Github. Après le téléchargement, décompressez-le et introduisez le fichier js dans votre section d'en-tête

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

Ajoutez le code à l'éditeur

Définissez d'abord un p avec l'identifiant de l'éditeur puis appelez ace.edit dans la méthode script (), le code est le suivant

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

Vous pouvez renommer la variable. Pour plus de commodité, j'ai défini l'éditeur var comme une variable. Vous pouvez également définir l'éditeur var comme une variable. La deuxième ligne déclare le type de surbrillance de langue à utiliser. Vous pouvez sélectionner des collections de langues supplémentaires dans le répertoire src. Voici une collection de langages pris en charge :

SQL
Ruby
SASS
PHP
Objectivec
Csharp
Java
JSON
Utiliser des paramètres supplémentaires

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

Ces trois lignes de code concernent les effets de saisie de texte. La première ligne modifie la couleur de la syntaxe et le thème par défaut du code. Il y en a des dizaines de nouveaux dans le répertoire src. Thèmes, vous pouvez choisir parmi eux
Les deux autres options concernent l'expérience utilisateur. Normalement, appuyer sur la touche Tab du clavier entrera 4 espaces. Ici, je le règle sur 2 espaces. De plus, le texte ne sera pas automatiquement renvoyé par défaut s'il dépasse la limite, une barre de défilement horizontale sera ajoutée et étendue vers l'extérieur. . Mais en utilisant cette méthode setUseWrapMode(true), nous pouvons résoudre le problème de retour à la ligne.
Il existe d'autres commandes, vous pouvez vous référer à l'assistant ACE. Cela inclut la modification de la position du curseur, l'ajout dynamique de nouveau contenu ou la copie de texte.

Code CSS

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!