Maison > interface Web > js tutoriel > le corps du texte

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

ringa_lee
Libérer: 2017-10-15 09:36:46
original
3588 Les gens l'ont consulté

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>
Copier après la connexion

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");
Copier après la connexion

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);
Copier après la connexion

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; 
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal