EditArea – Editeur de code source et colorisation syntaxique

Editeur avec colorisation syntaxique

Aujourd’hui je vais vous présenter un outil très intéressant pour les sites de codeurs. Je m’explique : admettons que vous êtes fou de programmation et que vous avez créé un site sur lequel vous donnez vos codes sources. Mais voilà, vous voudriez pouvoir modifier vos codes sources directement en ligne avec un éditeur agréable et surtout un éditeur qui inclus la coloration syntaxique.

Après la lecture de cet article vous serez capable de mettre en place l’éditeur de code source EditArea.

Tout sur EditArea

  1. EditArea – Éditeur de code source et colorisation syntaxique (cet article)
  2. EditArea – Conseil d’importation
  3. EditArea – CallBacks (en cours de rédaction)
  4. EditArea – Fonctions (en cours de rédaction)

Télécharger et Installer

Vous pouvez télécharger la dernière version d’EditArea ou prendre celle que j’utilise pour cet exemple.

En décompressant l’archive vous trouverez trois dossiers. Dans cet article nous utiliseront celui nommé « edit_area » mais vous pouvez toujours jeter un œil à « docs » qui vous donnera toute la documentation sur la version en cours et « exemples » si vous voulez être impressionné par la puissance de l’outil.

Copiez donc le dossier « edit_area » dans le dossier « js » de votre projet. Vous devriez avoir une arborescence de ce genre là :

Arborescence de l'exmple d'editarea

index.php

Dans ce tutoriel nous installerons un éditeur simple contenant quelques lignes de PHP. Créez donc un textarea :

<textarea cols="150" rows="15" id="area_id">&lt;?php
	$in  = 'zorglub';
	$out = '';
	for($i=0; $i&lt;strlen($in); $i++){
		$out = $in[$i].$out;
	}
	echo $out;
?&gt;</textarea>

js/script.js

Le fichier script.js (que vous retrouverez dans tous mes exemples), contient le script qui s’exécute dès que la page a finie de se charger. Ici nous lancerons EditArea sur le textarea crée ci-dessous.

editAreaLoader.init({
	id : 'area_id',
	syntax: 'php',
	start_highlight: true,
	language: 'fr',
	toolbar: 'undo,redo,|,change_smooth_selection,reset_highlight,highlight,|,word_wrap',
});

Configuration

id

(obligatoire) Contient l’id du textarea dans lequel doit être propulsé EditArea.
Type : String

language

Contient le code de la langue.
Type : String
Valeurs : Regardez les fichiers .js dans le dossier edit_area/langs.
Défaut : « en »

syntax

Contient le code du langage utilisé dans l’éditeur.
Type : String
Défaut : «  »

start_highlight

Défini si l’éditeur doit utiliser la colorisation syntaxique au lancement.
Type : Boolean
Défaut : false

is_multi_files

Défini si l’éditeur est multi-fichiers.
Type : Boolean
Défaut : false

min_width

Défini la largeur minimum de l’éditeur.
Type : Integer
Défaut : 400

min_height

Défini la heuteur minimum de l’éditeur.
Type : Integer
Défaut : 100

allow_resize

Défini les sens de lesquels l’utilisateur peut redimensionner l’éditeur.
Type : String
Valeurs : « no » | « both » | « x » | « y »
Défaut : 100

allow_toggle

Défini si l’utilisateur peut repasser en mode textarea.
Type : Boolean
Défaut : true

plugins

Permet d’ajouter des plugins personnels. Créez le votre en lisant la doc.
Type : String
Valeurs : Séparez les différents plugins par des virgules.
Défaut : «  »

browsers

Défini quels sont les navigateurs accepté par editarea.
Type : String
Valeurs : « all » | « known »
Défaut : « known »

display

Défini si l’éditeur doit être affiché dès qu’il est chargé ou plus tard.
Type : String
Valeurs : « onload » | « later »
Défaut : « onload »

toolbar

Défini quels sont les éléments qui vont apparaitre dans la barre en haut de l’éditeur.
Type : String
Valeurs : Combinaison de |, *, search, go_to_line, undo, redo, change_smooth_selection, reset_highlight, highlight, word_wrap, help, save, load, new_document, syntax_selection
Spécial : « * » ou « return » indique un passage à la ligne
Défaut : « search, go_to_line, fullscreen, |, undo, redo, |, select_font,|, change_smooth_selection, highlight, reset_highlight, word_wrap, |, help »

begin_toolbar

Défini quels sont les éléments à afficher au début de la toolbar.
Type : String
Valeurs : (cf toolbar)
Défaut : «  »

end_toolbar

Défini quels sont les éléments à afficher à la fin de la toolbar.
Type : String
Valeurs : (cf toolbar)
Défaut : «  »

font_size

Défini la taille du texte dans l’éditeur
Type : Integer
Défaut : 10

font_family

Défini la police du texte dans l’éditeur
Type : String
Défaut : « monospace »

cursor_position

Défini l’endroit où le curseur doit être positionné « auto »=avant le remplacement, « begin »=début du fichier
Type : String
Valeurs : « auto » | « begin »
Défaut : « begin »

gecko_spellcheck

Défini si le spell checker de firefox 2 est activé.
Type : Boolean
Défaut : false

max_undo

Défini le nombre maximum de retour en arrière autorisé.
Type : Integer
Défaut : 20

fullscreen

Défini si editarea doit être chargé en mode plein écran.
Type : Boolean
Défaut : false

is_editable

Défini si le champ est éditable ou non.
Type : Boolean
Défaut : true

word_wrap

Défini si le texte passe automatiquement à la ligne s’il atteint le bout de la ligne.
Type : Boolean
Défaut : true

replace_tab_by_spaces

Défini le nombre d’espaces à mettre à la place d’une tabulation.
Type : String (ou « false »)
Défaut : false

debug

Défini si le mode debug est activé.
Type : Boolean
Défaut : false

Callback & Fonctions

L’article étant d’une taille assez conséquente, je me permet de reporter les callbacks et fonctions d’editarea dans un futur article. Patientez un peu, vous les aurez ces explications. Bon courage.

Essai en ligne

Vous pouvez déjà tester le résultat de cet article dans mon labo. Et vous pouvez bien sûr le télécharger.

http://www.experience-developpement.fr
Tagués avec : , , ,
Publié dans Javascript

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*